Java 改造ayui表格組件實現多重排序

實現思路也比較簡單，只需要用一個數組來存放所有排序的列，再把這個數組傳到后端（后端排序）進行排序即可。沿用一般的使用習慣，按住 shift 鍵點擊表頭可增加排序列，按住 ctrl 鍵點擊表頭可減少排序列。話不多說，先上最終效果圖：

我當前用的是 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 下面，僅做拋磚引玉，希望對有需要的同學有幫助。

以上就是Java 改造ayui表格組件實現多重排序的詳細內容，更多關于Java 改造ayui實現多重排序的資料請關注好吧啦網其它相關文章！