layui数据表格实现行列拖动排序:soulTable插件配置与重载详解

作者:键盘侠时间:2026-11-01 02:38:41浏览:84

本文介绍如何在layui数据表格中利用soulTable插件实现行列拖动排序功能。通过引入soulTable扩展,配置拖拽事件,并在拖动结束后获取新旧索引及修改行数据。利用字段名(如xlh)定位数据,重新计算排序值后调用table.reloadData重载表格,确保前端显示与后端数据顺序一致。

layui数据表格行列拖动排序概述

首先参考layui官方文档。

接着介绍本文使用的插件官网:layui-soul-table示例文档。

该插件提供了丰富的功能。

查看下载页面后,不禁感叹后悔没有早点发现,否则无需自行编写下载功能。

建议访问官网查看其提供的众多实用功能。

soulTable插件引入与配置

以下是需要引入的JavaScript文件。

layui数据表格行列拖动排序概述

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扩展
});

官网推荐统一管理的引入方式,这种设计十分友好,允许直接将配置添加到自定义扩展之后。

拖动排序逻辑与表格重载实现

实际应用中遇到的主要问题是排序逻辑,因为数据表格的核心需求是获取当前的排序状态。

layui数据表格行列拖动排序概述

在拖动操作导致位置变更时,需要确保当前顺序能够正确显示。

依据插件提供的数据获取方法进行处理。

 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数据表格拖动重新排序内容,请搜索本站历史文章或继续浏览后续相关文章,希望大家今后多多支持本站!

作者最新文章