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';

}

<