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
                                });
相关推荐
zwjapple7 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作