layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求。今天一时手痒,决定改造一番以支持多重排序。 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传到后端(后端排序)进行排序即可。沿用一般的使用习惯,按住 shift 键点击表头可增加排序列,按住 ctrl 键点击表头可减少排序列。话不多说,先上最终效果图: 1. 定义排序列数组 我当前用的是 2.5.6 版本,源码之前为适应业务需求也做过相应修改,所以下文说到的行数只是个大概数。 为兼容之前单列排序的使用习惯,我们增加一个 multiSort 的配置属性,默认为 false,为 true 时才开启多列排序。修改源码大概第 235 行,增加两个属性 multiSort、sortCols。 //构造器 , Class = function (options) { var that = this; that.index = ++table.index; that.mutlSort = false; that.sortCols = []; // 组合排序列集合 that.config = $.extend({}, that.config, table.config, options); that.render(); }; 2. 修改表头点击事件 之前单列排序是根据点击的表头,将表头对应的字段和排序类型(asc、desc)做为参数传给 sort 方法。这里我们需要稍做修改,当按住 shfit 键点击表头时增加排序列,当按住 ctrl 键点击表头时减少排序列。修改源码大概 1511 行 //排序 th.on('click', function (e) { var othis = $(this) , options = that.config , elemSort = othis.find(ELEM_SORT) , nowType = elemSort.attr('lay-sort') , field = othis.data('field') , type; if (!elemSort[0] || resizing === 1) return resizing = 2; if (nowType === 'asc') { type = 'desc'; } // Fix# 排序只有 desc 和 asc 两种模式 //else if (nowType === 'desc') { // type = null; //} else { type = 'asc'; } var sorts = JSON.parse(JSON.stringify(that.sortCols)); if (e.shiftKey) { // 加入组合排序 var inArray = false; for (var i = 0; i < sorts.length; i++) { if (sorts[i].field == field) { sorts[i].type = type; inArray = true; break; } } if (!inArray) sorts.push({ field: field, type: type }); } else if (e.ctrlKey) { // 从组合排序移除 for (var i = 0; i < sorts.length; i++) { if (sorts[i].field == field) { sorts.splice(i, 1); break; } } } else { // 单列排序 sorts = [{ field: field, type: type }]; } // 单列排序配置 if (!options.multiSort) sorts = [{ field: field, type: type }]; that.sort(sorts, null, true); }).find(ELEM_SORT + ' .layui-edge ').on('click', function (e) { var othis = $(this) , index = othis.index() , field = othis.parents('th').eq(0).data('field'); // 阻止事件冒泡 layui.stope(e); if (index === 0) { that.sort([{ field: field, type: 'asc' }], null, true); } else { that.sort([{ field: field, type: 'desc' }], null, true); } }); 3. 修改表格排序方法 改造前的 sort 方法是用 filed 和 type 签名,多重排序我们要用排序数组 sortCols 做签名,修改源码大概第 1076 行: //数据排序 Class.prototype.sort = function (sorts, pull, formEvent) { var that = this , res = {} , options = that.config , filter = options.elem.attr('lay-filter') , data = table.cache[that.key], thisData; // 如果欲执行的排序已在状态中,则不执行渲染 if (sorts.length == that.sortCols.length) { var sorted = true; for (var i = 0; i < sorts.length; i++) { if (sorts[i].field != that.sortCols[i].field || sorts[i].type != that.sortCols[i].type) { sorted = false; break; } } if (sorted) return; } that.layHeader.find('th').each(function (i, item) { // 清除其它标题排序状态 $(item).find(ELEM_SORT).removeAttr('lay-sort'); var field = $(item).data('field'); var cols = $.grep(sorts, function (obj) { return obj.field === field }); if (cols.length > 0) { $(item).find(ELEM_SORT).attr('lay-sort', cols[0].type || null); } }); delete that.sortCols; that.sortCols = sorts; //默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序) if (options.autoSort && sorts) { var clone = JSON.parse(JSON.stringify(data || [])); clone.sort(function (dataRow1, dataRow2) { for (var i = 0, l = sorts.length; i < l; i++) { var field = sorts[i].field; var sign = sorts[i].type === 'asc' ? 1 : -1; var value1 = dataRow1[field], value2 = dataRow2[field]; var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign; if (result != 0) { return result; } } return 0; }); thisData = clone; } // 输出表格数据 if (options.autoSort || !formEvent) { res[options.response.dataName] = thisData || data; that.renderData(res, that.page, that.count, true); } if (formEvent) layui.event.call(that, MOD_NAME, 'sort(' + filter + ')', sorts); }; 同时修改源码大概 686 行: //获得数据 Class.prototype.pullData = function (curr) { var that = this , options = that.config , request = options.request , response = options.response , sort = function () { if (typeof options.initSort === 'object') { //that.sort(options.initSort.field, options.initSort.type); that.sort(options.initSort); } }; // 此处略... } 4. 修改后台传参 传递给后台的参数同样需要改成数组,后端接收的代码同时也改成接收数组 // 监听列排序 var layAttribute = self._$element.attr('lay-filter'); layui.table.on('sort(' + layAttribute + ')', function (obj) { // 过滤条件 var sortFilter = $.extend({}, kom.toJS(self.loadCondition || {})); // 过滤条件+排序字段(注意这里是传递的是数组) sortFilter.sorts = $.map(obj, elem => { return { fieldName: elem.field, order: elem.type }; }); // 再一次自定义过滤条件 if (self.options.parseFilter) sortFilter = self.options.parseFilter.call(self, sortFilter); // 更新 table 组件配置 self.options.where = sortFilter; self.table.config.where = sortFilter; self.table.inst.config.where = sortFilter; // 排序说明 self.options.initSort = obj; self.table.config.initSort = obj; self.table.inst.config.initSort = obj; // 加载数据 self.table.inst.pullData(self.table.inst.page); }); // 后端代码 public async Task<PagedList<Log>> GetPagedList([FromUri]Paging paging, [FromUri]Log condition, [FromUri]Sort[] sorts) { return await svc.GetPagedList(paging, condition, sorts); } 至此,整个改造工作完成,整个过程也相对简单。主要是脚勤手快,想得到就能做得出 ~..~。layui 在国内的社区还是挺成熟,不过个人感觉就是有点封闭,希望这个国产的框架组件越做越好,越走越远。 代码单独拎出来临时放在 https://github.com/TANZAME/TZM.XFramework/tree/master/.nuget 下面,仅做抛砖引玉,希望对有需要的同学有帮助。 |
|