layui表格 设置默认排序_改造 layui 表格组件实现多重排序

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> GetPagedList([FromUri]Paging paging, [FromUri]Log condition, [FromUri]Sort[] sorts)

{

return await svc.GetPagedList(paging, condition, sorts);

}

至此，整个改造工作完成，整个过程也相对简单。主要是脚勤手快，想得到就能做得出 ~..~。layui 在国内的社区还是挺成熟，不过个人感觉就是有点封闭，希望这个国产的框架组件越做越好，越走越远。

技术交流 QQ 群：816425449