Java 改造ayui表格組件實(shí)現多重排序

目錄

　　實(shí)現思路也比較簡(jiǎn)單，只需要用一個(gè)數組來(lái)存放所有排序的列，再把這個(gè)數組傳到后端（后端排序）進(jìn)行排序即可。沿用一般的使用習慣，按住 shift 鍵點(diǎn)擊表頭可增加排序列，按住 ctrl 鍵點(diǎn)擊表頭可減少排序列。話(huà)不多說(shuō)，先上最終效果圖：

1. 定義排序列數組

我當前用的是 2.5.6 版本，源碼之前為適應業(yè)務(wù)需求也做過(guò)相應修改，所以下文說(shuō)到的行數只是個(gè)大概數。

為兼容之前單列排序的使用習慣，我們增加一個(gè) multiSort 的配置屬性，默認為 false，為 true 時(shí)才開(kāi)啟多列排序。修改源碼大概第 235 行，增加兩個(gè)屬性 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. 修改表頭點(diǎn)擊事件

之前單列排序是根據點(diǎn)擊的表頭，將表頭對應的字段和排序類(lèi)型（asc、desc）做為參數傳給 sort 方法。這里我們需要稍做修改，當按住 shfit 鍵點(diǎn)擊表頭時(shí)增加排序列，當按住 ctrl 鍵點(diǎn)擊表頭時(shí)減少排序列。修改源碼大概 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;
        /