layui 数据表格拖动 列、行 位置重新排序功能实现
先贴官网 layui官网 ;
再贴一个要使用的 插件官网 : layui-soul-table 示例文档 ;
这个插件功能很多
看到那个下载 后悔没早点知道啊 还自己写了 一个下载
可以到官网看看 很多实用的
需要引入的 js

layui.config({
base: rootPath,
version: true
}).extend({
// 自定义扩展
soulTable: 'three-modules/soul-Table/soulTable.slim', // soulTable表格扩展( 要使用soulTable必须先引入当前文件)
tableChild: 'three-modules/soul-Table/tableChild', // soulTable子表扩展
tableMerge: 'three-modules/soul-Table/tableMerge', // soulTable合并单元格扩展
tableFilter: 'three-modules/soul-Table/tableFilter', // soulTable筛选扩展
excel: 'three-modules/soul-Table/excel', // soulTable导出excel扩展
});官网上也是这样引入的 统一管理的 所以 很友好 能有 直接添加到自己的增加的后面
遇到的问题 就是 排序 因为我的数据表格中 主要是要获取但当前的排序

拖动后更改位置 当前的能够显示出来
根据给的获取数据
let oldIndex = obj.oldIndex; // 原来的数据索引
let newIndex = obj.newIndex; // 改动后数据索引
let modifiedRow = obj.row; // 修改行数据
let cache = obj.cache; // 改动后全表数据然后判断移动了多少 进行重载渲染: 我的字段名称是 xlh 能使用的话 换成自己的就行了
// 首先,找到修改行在全表数据中的索引,以便后续直接操作
let modifiedRowIndex = cache.findIndex(row => row.xlh === modifiedRow.xlh && row.fdname === modifiedRow.fdname);
// 确保找到了对应的行
if (modifiedRowIndex !== -1) {
// 如果移动是向前(oldIndex > newIndex),则需要减少中间行的xlh
if (oldIndex > newIndex) {
for (let i = newIndex + 1; i < oldIndex; i++) {
cache[i].xlh--;
}
}
// 如果是向后移动(oldIndex < newIndex),则需要增加中间行的xlh
else if (oldIndex < newIndex) {
for (let i = oldIndex; i < newIndex; i++) {
cache[i].xlh++;
}
}
// 直接根据新的索引位置更新修改行的xlh
modifiedRow.xlh = newIndex + 1;
// 更新 cache 中对应行的数据(虽然实际上可能不需要,因为假设 cache 已经是最新的)
// 但这里为了演示逻辑完整性,我们模拟更新操作
cache[modifiedRowIndex] = modifiedRow;
// 重新遍历并确保所有行的xlh正确无误(这一步在大多数情况下可能不需要,因为我们已经针对性调整了受影响的部分)
// 但为了确保逻辑完整性,保留此步骤
cache.forEach((row, index) => {
row.xlh = index + 1; // 确保每个xlh与索引对应
});
// console.log("根据新顺序更新xlh后的全表数据:", cache);
} else {
console.error("在全表数据中未找到对应的修改行");
}
// console.log("根据最终顺序更新xlh后的数据:", cache);
table.reloadData('表id', {
data: cache
});到此这篇关于layui 数据表格拖动 列、行 位置重新排序功能实现的文章就介绍到这了,更多相关layui 数据表格拖动重新排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript中fromCharCode 和 fromCodePoint 的详解与应
本文将详细介绍 JavaScript 中的 String.fromCharCode 和 String.fromCodePoint 方法,这两个方法能够帮助开发者高效地处理字符与编码之间的转换,理解它们的区别与应用,将让你的代码更加灵活和高效,感兴趣的朋友跟随小编一起看看吧2024-12-12
bootstrap table插件的分页与checkbox使用详解
这篇文章主要为大家详细介绍了bootstrap table插件的分页与checkbox使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-07-07
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
如果要为图片添加详细的图片说明,并为图片的说明设置一些格式,如字体的大小、颜色等,那么使用 title 这个属性来设置这些说明信息是没办法实现的。2010-03-03
javascript实现window.print()去除页眉页脚
这篇文章主要介绍了javascript实现window.print()去除页眉页脚的方法以及各参数的设置技巧,需要的朋友可以参考下2014-12-12


最新评论