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';
}
// 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> GetPagedList([FromUri]Paging paging, [FromUri]Log condition, [FromUri]Sort[] sorts)
{
return await svc.GetPagedList(paging, condition, sorts);
}
至此,整个改造工作完成,整个过程也相对简单。主要是脚勤手快,想得到就能做得出 ~..~。layui 在国内的社区还是挺成熟,不过个人感觉就是有点封闭,希望这个国产的框架组件越做越好,越走越远。
技术交流 QQ 群:816425449
layui表格 设置默认排序_改造 layui 表格组件实现多重排序相关推荐
- layui表格 设置默认排序_layui table对表格数据处理后的排序问题
table模块是layui最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作.在 table模块对表格数据处理后排序可能出现问题,本文就来为大家介绍一下解决这种问题的方法. 使用layui ...
- angular select设置默认选中_技术分享 | Charset 和 Collat??ion 设置对 MySQL 性能的影响...
原创: 管长龙 译 作者:Vadim Tkachenko 通过测试,比较 MySQL 5.7.25 和 MySQL 8.0.15 之间字符集和校验规则的设置所带来的性能差异.测试环境 系统 | Ubu ...
- win10设置默认输入法_个性化设置技巧
个性化设置技巧 子墨居士前言本次内容主要是win10系统自带的功能,不是用第三方软件优化桌面的情况下,让自己的电脑桌面能更美观.更舒服.系统自身的个性化设置主要是下图中的几个.鼠标右击->个性化 ...
- java设置默认参数_关于java:如何设置默认方法参数值?
本问题已经有最佳答案,请猛点这里访问. 是否可以在Java中设置默认的方法参数值? 例子:如果有方法 public int doSomething(int arg1, int arg2) { //so ...
- 表单设置默认值_你还不知道表单怎么设计吗?看这里!
表单是电子商务.社交互动和大多数基于生产力应用类型的网站的关键.尽可能简单,微小的变化都有可能极大的提高用户体验. 一.设计原则 尽量减少痛苦 填写过程尽量简洁.容易. 说明填写完成路径 清晰的告诉人 ...
- python函数设置默认参数_深入讲解Python函数中参数的使用及默认参数的陷阱
这篇文章主要介绍了Python函数中参数的使用及默认参数的陷阱,文中将函数的参数分为必选参数.默认参数.可变参数和关键字参数来讲,要的朋友可以参考下 C++里函数可以设置缺省参数,Java不可以,只能 ...
- word设置默认字体_如何在Word中设置默认字体
word设置默认字体 Word is a powerful application, but some of the configuration tools are not very intuitiv ...
- mysql 自然排序_如何在mysql中实现自然排序
背景 熟悉mysql的同学应该清楚,mysql在对字符串做order by排序时是按照字典序进行排序的,但是如果字符串中包含数字的话(我们称这种类型的字符串为alphanumeric),仅按照字典序的 ...
- dataframe 排序_如何对Pandas DataFrame进行自定义排序
作者|B. Chen 编译|VK 来源|Towards Data Science Pandas DataFrame有一个内置方法sort_values(),可以根据给定的变量对值进行排序.该方法本身使 ...
最新文章
- 打开云服务器连不上网,云服务器怎么连接网络连接不上
- Arm 发布移动端 v9 体系新架构,CPU、GPU、IP全囊括了
- 华中科技大学计算机组成计算机数据表示实验(hust)平台_华中科技大学各院系2020年博士研究生“申请考核”制拟录取名单公示...
- shopify二次开发教程_详细教程:如何将Shopify的Storefront API与React和Redux结合使用...
- java5的递归算法_java递归算法 java面试题(5)
- redis数据结构对象
- const变量生存周期_CTM期刊 |神经胶质瘤中HOTAIREZH2抑制剂AQB能上调CWF19L1并促进CDK4/6抑制剂帕博西尼对细胞周期的抑制...
- java 双向链表_Day26:二叉搜索树与双向链表
- 1.10_merge_sort_归并排序
- 异步方法的编写与使用
- qt之qthread的使用
- 2015年 教师全员远程培训挂机 教师远程全员培训挂机 教师继续教育挂机 挂机软件 全国通用版...
- stm32低功耗解决方案-(外部时钟芯片RX8025T)
- 调制深度(modulation depth)是什么?
- fflush函数实例
- 1109 Group Photo (25分)/1055 集体照 (25分)后三个测试点
- android sdk版本8.0,把targetSdkVersion设置为26(Android 8.0)需要注意的地方
- 秋招小结:感受+面经(CV算法岗)
- 文旅部:对不合理低价游、强迫消费等保持高压态势
- 区块链核心技术简单介绍