Java 改造ayui表格組件實(shí)現(xiàn)多重排序
實(shí)現(xiàn)思路也比較簡單,只需要用一個(gè)數(shù)組來存放所有排序的列,再把這個(gè)數(shù)組傳到后端(后端排序)進(jìn)行排序即可。沿用一般的使用習(xí)慣,按住 shift 鍵點(diǎn)擊表頭可增加排序列,按住 ctrl 鍵點(diǎn)擊表頭可減少排序列。話不多說,先上最終效果圖:

1. 定義排序列數(shù)組
我當(dāng)前用的是 2.5.6 版本,源碼之前為適應(yīng)業(yè)務(wù)需求也做過相應(yīng)修改,所以下文說到的行數(shù)只是個(gè)大概數(shù)。
為兼容之前單列排序的使用習(xí)慣,我們增加一個(gè) multiSort 的配置屬性,默認(rèn)為 false,為 true 時(shí)才開啟多列排序。修改源碼大概第 235 行,增加兩個(gè)屬性 multiSort、sortCols。
//構(gòu)造器
, 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)擊事件
之前單列排序是根據(jù)點(diǎn)擊的表頭,將表頭對應(yīng)的字段和排序類型(asc、desc)做為參數(shù)傳給 sort 方法。這里我們需要稍做修改,當(dāng)按住 shfit 鍵點(diǎn)擊表頭時(shí)增加排序列,當(dāng)按住 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;
//}
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 簽名,多重排序我們要用排序數(shù)組 sortCols 做簽名,修改源碼大概第 1076 行:
//數(shù)據(jù)排序
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;
// 如果欲執(zhí)行的排序已在狀態(tài)中,則不執(zhí)行渲染
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) {
// 清除其它標(biāo)題排序狀態(tài)
$(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;
//默認(rèn)為前端自動(dòng)排序。如果否,則需自主排序(通常為服務(wù)端處理好排序)
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;
}
// 輸出表格數(shù)據(jù)
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);
};
同時(shí)修改源碼大概 686 行:
//獲得數(shù)據(jù)
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. 修改后臺傳參
傳遞給后臺的參數(shù)同樣需要改成數(shù)組,后端接收的代碼同時(shí)也改成接收數(shù)組
// 監(jiān)聽列排序
var layAttribute = self._$element.attr('lay-filter');
layui.table.on('sort(' + layAttribute + ')', function (obj) {
// 過濾條件
var sortFilter = $.extend({}, kom.toJS(self.loadCondition || {}));
// 過濾條件+排序字段(注意這里是傳遞的是數(shù)組)
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;
// 加載數(shù)據(jù)
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);
}
至此,整個(gè)改造工作完成,整個(gè)過程也相對簡單。主要是腳勤手快,想得到就能做得出 ~..~。layui 在國內(nèi)的社區(qū)還是挺成熟,不過個(gè)人感覺就是有點(diǎn)封閉,希望這個(gè)國產(chǎn)的框架組件越做越好,越走越遠(yuǎn)。
代碼單獨(dú)拎出來臨時(shí)放在 https://github.com/TANZAME/TZM.XFramework/tree/master/.nuget 下面,僅做拋磚引玉,希望對有需要的同學(xué)有幫助。
以上就是Java 改造ayui表格組件實(shí)現(xiàn)多重排序的詳細(xì)內(nèi)容,更多關(guān)于Java 改造ayui實(shí)現(xiàn)多重排序的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
SpringBoot使用Kafka來優(yōu)化接口請求的并發(fā)方式
這篇文章主要介紹了SpringBoot使用Kafka來優(yōu)化接口請求的并發(fā)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Java服務(wù)如何調(diào)用系統(tǒng)指令、Bat腳本記錄
這篇文章主要介紹了Java服務(wù)如何調(diào)用系統(tǒng)指令、Bat腳本記錄,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
關(guān)于Java中Comparable 和 Comparator的用法
這篇文章主要介紹了關(guān)于Java中Comparable 和 Comparator的用法,Comparable 和 Comparator 是關(guān)于排序的兩個(gè)接口,用來實(shí)現(xiàn) Java 集合中的的排序功能,需要的朋友可以參考下2023-04-04
Spring注解中@Configuration和@Component到底有啥區(qū)別
之前一直搞不清@Component和@Configuration這兩個(gè)注解到底有啥區(qū)別,一直認(rèn)為被這兩修飾的類可以被Spring實(shí)例化嘛,最近終于弄明白了,這篇文章主要給大家介紹了關(guān)于Spring注解中@Configuration和@Component到底有啥區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
Java實(shí)現(xiàn)在線編輯預(yù)覽office文檔詳解
PageOffice是一款在線的office編輯軟件,幫助Web應(yīng)用系統(tǒng)或Web網(wǎng)站實(shí)現(xiàn)用戶在線編輯Word、Excel、PowerPoint文檔,下面我們就來看看如何使用Java實(shí)現(xiàn)在線預(yù)覽office吧2024-01-01
Java Date時(shí)間類型的操作實(shí)現(xiàn)
本文主要介紹Java Date 日期類型,以及Calendar的怎么獲取時(shí)間,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
springboot+vue實(shí)現(xiàn)登錄功能
這篇文章主要為大家詳細(xì)介紹了springboot+vue實(shí)現(xiàn)登錄功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05

