大体没什么变化，主要是添加了一个方法，getSelectedItems(),返回当前选中的数据项。
(function ($) { $.fn.GridView = function (setting) { var _self = this // 私有变量-展示列表的数量,已选中的数量 var listCount = 0 var selectedCount = 0 // data _self.sourceData = [] // 随机值，用于标识dom的id var rand = Math.floor(Math.random() * 1000) // 私有变量-doms var wrapper = $('<tbody id="tbody' + rand + '"></tbody>') var cbSelectAll // 配置项-是否显示分页，是否支持多选，table的样式，pager的样式 var isPager = !!setting.isPager var isMulti = !!setting.isMulti var listClass = setting.listClass ? setting.listClass : '' var apiUrl = setting.apiUrl ? setting.apiUrl : '' var columns = setting.columns ? setting.columns : '' var value_column = setting.valueColumn || null // 配置项-几个回调函数1、ajax请求前的回调，2、dom渲染完成的回调，3、点击数据行时的回调 var onBeforeSend = (setting.onBeforeSend && $.isFunction(setting.onBeforeSend)) ? setting.onBeforeSend : null var onError = (setting.onError && $.isFunction(setting.onError)) ? setting.onError : null var onDataBindComplete = (setting.onDataBindComplete && $.isFunction(setting.onDataBindComplete)) ? setting.onDataBindComplete : null var onRowClick = (setting.onRowClick && $.isFunction(setting.onRowClick)) ? setting.onRowClick : null var pager = null // 配置项-1、ajax加载完成，对数据源进行加工的函数，2、ajax请求之前获取查询参数的函数 var sourceConverter = (setting.sourceConverter && $.isFunction(setting.sourceConverter)) ? setting.sourceConverter : null var searchParamsGetter = (setting.searchParamsGetter && $.isFunction(setting.searchParamsGetter)) ? setting.searchParamsGetter : null // dom事件绑定 function addSingleRowClickEventListener() { wrapper.on('click', 'tr', function () { var that = $(this) if (that.hasClass('selected')) { that.removeClass('selected') selectedCount = 0 if (onRowClick) { var item = _self.sourceData[that.index()] if (item) onRowClick(item, false) } } else { that.addClass('selected').siblings().removeClass('selected') selectedCount = 1 if (onRowClick) { var item = _self.sourceData[that.index()] if (item) onRowClick(item, true) } } }) } function addMultiRowClickEventListener() { wrapper.on('click', 'tr', function () { var that = $(this) if (that.hasClass('selected')) { that.removeClass('selected').find(':checkbox').prop('checked', false) selectedCount-- cbSelectAll.prop('checked', false) if (onRowClick) { var item = _self.sourceData[that.index()] if (item) onRowClick(item, false) } } else { that.addClass('selected').find(':checkbox').prop('checked', true) selectedCount++ if (selectedCount === listCount) { cbSelectAll.prop('checked', true) } if (onRowClick) { var item = _self.sourceData[that.index()] if (item) onRowClick(item, true) } } }) cbSelectAll.on('click', function () { var that = $(this) if (that.prop('checked')) { wrapper.find(':checkbox').prop('checked', true).parent().parent().addClass('selected') selectedCount = listCount } else { wrapper.children('tr').removeClass('selected').find(':checkbox').prop('checked', false) selectedCount = 0 } }) } // 初始化控件-构造html等 function init() { if (!columns) return console.log('未提供数据列') if (!apiUrl) return console.log('未提供api路径') var table = $('<table' + (listClass ? ' class="' + listClass + '"' : '') + ' id="myGV_' + rand + '"></table>') var thead = '<thead>' if (columns) { if (isMulti) { thead += '<th class="chk"><input type="checkbox" id="cbAll' + rand + '" /></th>' } else { thead += '<th class="no"></th>' } $.each(columns, function (idx, col) { thead += '<th>' + col.title + '</th>' }) thead += '<th></th>' thead += '</thead>' } table.append($(thead)) table.append(wrapper) _self.append(table) cbSelectAll = $('#cbAll' + rand) _self.fun = new Function('data', renderFunString()) if (isMulti) { addMultiRowClickEventListener() } else { addSingleRowClickEventListener() } if (isPager) { pager = new Pager(_self, setting.pageSize || 20) pager.addEventListener( function () { _self.show() }) } } // 插入数据 function addRowsToTbody() { if (_self.sourceData && _self.sourceData.length > 0) { var html = _self.fun(_self.sourceData) wrapper.html(html) } else { var colCount = columns.length + 2 wrapper.html("<tr class='empty'><td colspan='" + colCount + "'>请求的数据为空</td></tr>") } } function getAjaxData() { var param if ($.isFunction(searchParamsGetter)) { param = searchParamsGetter() } if (isPager) { if ($.isArray(param)) { // $("form").serializationArray() param.push({ 'name': 'pageSize', 'value': pager.pageSize }) param.push({ 'name': 'pageIndex', 'value': pager.pageIndex }) } else if ($.isPlainObject(param)) { // 自定义查询对象 $.extend(true, param, { 'pageSize': pager.pageSize, 'pageIndex': pager.pageIndex }) } else { // $("form").serialization() param = (param ? param + '&' : '') + 'pageSize=' + pager.pageSize + '&pageIndex=' + pager.pageIndex } } return param || {} } // 渲染函数 function renderFunString() { var funString = 'var self = this; var html = ""; $.each(data, function(idx, item) { ' funString += 'html += "<tr>"; html += self.setFirstCol(idx + 1);' $.each(columns, function (idx, item) { if (item.func) { funString += ' html += self.setCol( ' + item.func + '(item), ' + item.width + ', "' + item.cssClass + '", "");' } else { funString += ' html += self.setCol( item.' + item.column + ', ' + item.width + ', "' + item.cssClass + '", "");' } }) funString += ' html += self.setLastCol(); html += "</tr>" }); return html;' return funString } // 渲染第一列 _self.setFirstCol = function (val) { if (isMulti) { return '<td class="chk"><input type="checkbox"></td>' } else { return '<td class="no">' + val + '</td>' } } // 渲染最后一列 _self.setLastCol = function () { return '<td></td>' } // 渲染中间列 _self.setCol = function (content, width, cssClass, level) { var html = '<td' html += width ? ' style="' + width + 'px"' : '' html += cssClass && cssClass !== 'undefined' ? ' class="' + cssClass + '"' : '' html += '>' html += content && content !== 'undefined' ? content : '' html += '</td>' return html } function Pager(wrapper, pagesize, cssClass) { this.pageSize = pagesize || 20 this.pageCount = 0 this.recordCount = 0 this.pageIndex = 1 var pagerDom = $('<div class="pager"></div>') wrapper.append(pagerDom) var buttonWrapper = $('<div class="buttons"></div>') var info = $('<div class="info"></div>') pagerDom.append(buttonWrapper) pagerDom.append(info) var firstBtn = $('<a class="disabled"><i class="fa fa-fast-backward"></i></a>') buttonWrapper.append(firstBtn) var prevBtn = $('<a class="disabled"><i class="fa fa-backward"></i></a>') buttonWrapper.append(prevBtn) var nextBtn = $('<a class="disabled"><i class="fa fa-forward"></i></a>') buttonWrapper.append('<b>第</b>') var currentInput = $('<input value="1" type="text" maxlength="4" />') buttonWrapper.append(currentInput) buttonWrapper.append('<b>页</b>') buttonWrapper.append(nextBtn) var lastBtn = $('<a class="disabled"><i class="fa fa-fast-forward"></i></a>') buttonWrapper.append(lastBtn) this.addEventListener = function (fn) { var that = this firstBtn.on('click', function () { if ($(this).hasClass('disabled')) return that.pageIndex = 1 currentInput.val(that.pageIndex) fn(that) }) prevBtn.on('click', function () { if ($(this).hasClass('disabled')) return if (that.pageIndex > 1) { that.pageIndex-- } else { that.pageIndex = 1 } currentInput.val(that.pageIndex) fn(that) }) nextBtn.on('click', function () { if ($(this).hasClass('disabled')) return that.pageIndex++ if (that.pageIndex > that.pageCount) { that.pageIndex = that.pageCount } currentInput.val(that.pageIndex) fn(that) }) lastBtn.on('click', function () { if ($(this).hasClass('disabled')) return that.pageIndex = that.pageCount currentInput.val(that.pageIndex) fn(that) }) currentInput.on('change', function () { var v = Number($(this).val()) if (!v || v < 0 || v > that.pageCount) return $(this).val(that.pageIndex) that.pageIndex = v currentInput.val(that.pageIndex) fn(that) }) } this.setPager = function (total, start) { this.recordCount = total this.pageCount = Math.ceil(this.recordCount / this.pageSize) firstBtn.removeClass('disabled') prevBtn.removeClass('disabled') nextBtn.removeClass('disabled') lastBtn.removeClass('disabled') if (this.pageIndex === 1) { firstBtn.addClass('disabled') prevBtn.addClass('disabled') } if (this.pageIndex === this.pageCount) { nextBtn.addClass('disabled') lastBtn.addClass('disabled') } var msg = '共计' + this.recordCount + '条记录，每页显示' + this.pageSize + '条，共' + this.pageCount + '页，用时' + (new Date().getTime() - start) + '毫秒' info.html(msg) } } // 开放接口-获取选中的数据，如果没有选中项，返回null；如果有选中项，多选，返回项目数组，单选，返回一个数据项 // 获取数据 _self.show = function (index, type) { if (!apiUrl) { return } _self.sourceData = [] var start = new Date().getTime(); if (!type || type.toLowerCase() !== 'post') { $.get(apiUrl, getAjaxData(), function (data) { if (sourceConverter && $.isFunction(sourceConverter)) { _self.sourceData = sourceConverter(data.body) } else { _self.sourceData = data.body } addRowsToTbody() if (isPager) { pager.setPager(data.totalCount, start) } }) } else { $.post(apiUrl, getAjaxData(), function (data) { if (sourceConverter && $.isFunction(sourceConverter)) { _self.sourceData = sourceConverter(data.body) } else { _self.sourceData = data.body } addRowsToTbody() if (isPager) { pager.setPager(data.totalCount, start) } }) } } _self.get = function () { var start = new Date().getTime(); _self.sourceData = [] listCount = 0 $.ajax({ url: apiUrl, data: getAjaxData(), type: 'GET', contentType: 'JSON', onBeforeSend: function () { if (onBeforeSend && $.isFunction(onBeforeSend)) onBeforeSend() }, success: function (data) { _self.sourceData = (sourceConverter && $.isFunction(sourceConverter)) ? sourceConverter(data.body) : data.body addRowsToTbody() if (isPager) pager.setPager(data.totalCount, start) if (onDataBindComplete && $.isFunction(onDataBindComplete)) onDataBindComplete() }, error: function () { if (onError && $.isFunction(onError)) onError() } }) } _self.post = function () { _self.sourceData = [] var start = new Date().getTime(); listCount = 0 $.ajax({ url: apiUrl, data: getAjaxData(), type: 'POST', contentType: 'JSON', onBeforeSend: function () { if (onBeforeSend && $.isFunction(onBeforeSend)) onBeforeSend() }, success: function (data) { _self.sourceData = (sourceConverter && $.isFunction(sourceConverter)) ? sourceConverter(data.body) : data.body addRowsToTbody() if (isPager) pager.setPager(data.totalCount, start) if (onDataBindComplete && $.isFunction(onDataBindComplete)) onDataBindComplete() }, error: function () { if (onError && $.isFunction(onError)) onError() } }) } _self.getSelectedItems = function () { if (selectedCount === 0) return null if (isMulti) { var result = [] $.each(wrapper.children('tr.selected'), function (idx, item) { result.push(_self.sourceData[$(item).index()]) }) return result } else { var idx = wrapper.children('tr.selected').first().index() return _self.sourceData[idx] } } _self.getSelectedId = function () { var items = _self.getSelectedItems() if (!items) return null if (!isMulti) { if (value_column) { return items[value_column] } else { return null } } else { if (items.length == 0) return null; if (value_column) { return items[0][value_column]; } else { return null; } } } init() return _self } })(jQuery)