关于java:改造-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<PagedList<Log>> GetPagedList([FromUri]Paging paging, [FromUri]Log condition, [FromUri]Sort[] sorts){    return await svc.GetPagedList(paging, condition, sorts);}

至此，整个革新工作实现，整个过程也绝对简略。次要是脚勤手快，想得到就能做得出 ~..~。layui 在国内的社区还是挺成熟，不过个人感觉就是有点关闭，心愿这个国产的框架组件越做越好，越走越远。

代码独自拎进去长期放在 https://github.com/TANZAME/TZ... 上面，仅做抛砖引玉，心愿对有须要的同学有帮忙。

技术交换 QQ 群：816425449

本文由博客一文多发平台 OpenWrite 公布！