layui 数据表格 拖动 列、行 位置 重新排序 等

news2024/11/28 6:32:46

先贴官网 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
                                });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1650276.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LTE的EARFCN和band之间的对应关系

一、通过EARFCN查询对应band 工作中经常遇到只知道EARFCN而需要计算band的情况&#xff0c;因此查了相关协议&#xff0c;找到了他们之间的对应关系&#xff0c;可以直接查表&#xff0c;非常方便。 具体见&#xff1a; 3GPP TS 36.101 5.7.3 Carrier frequency and EAR…

PCIE协议-1

1. PCIe结构拓扑 一个结构由点对点的链路组成&#xff0c;这些链路将一组组件互相连接 - 图1-2展示了一个结构拓扑示例。该图展示了一个称为层级结构的单一结构实例&#xff0c;由一个根复合体&#xff08;Root Complex, RC&#xff09;、多个端点&#xff08;I/O设备&#xf…

计算机考研|今年这么多高校改考408,该怎么择校呢?

25年改考408院校名单 考研第一重要的事情并不是分要多高&#xff0c;而是要能考得上&#xff01; 尤其是408&#xff0c;绝对是选择大于努力的典范。方向不对&#xff0c;努力作废&#xff01; 就看我22年的分数线吧&#xff0c;最炸的就属上海交大了&#xff0c;大旱区结果…

java-函数式编程-语法

目录 1、函数表现形式 分类 lambda表达式 参数类型可以全写&#xff0c;也可以全不写&#xff0c;但不能一部分写&#xff0c;一部分不写lambda 的省略策略&#xff1a;凡是可推导&#xff0c;都可以省略 方法引用 练习-判断语法正确性 练习-写出与方法引用等价的lambda表达式…

【Linux】HTTPS

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;Linux 目录 &#x1f449;&#x1f3fb;HTTPS协议概念&#x1f449;&#x1f3fb;加密为什么要进行加密 &#x1f449;&#x1f3fb;常见的加密方式对称加密…

C语言栈的含义与栈数据操作代码详解!

引言&#xff1a;在本篇博客中&#xff0c;我们将学到数据结构——栈&#xff0c;讲到栈的含义与关于栈的数据操作代码。栈可以在顺序表、双向链表以及单链表的基础上实现&#xff0c;而于本篇博客中&#xff0c;我们选择在顺序表的基础上实现栈。 更多有关C语言和数据结构知识…

大数据与会计专业主要学什么课程

大数据与会计专业是一个结合了传统会计知识与现代大数据技术的交叉学科&#xff0c;旨在培养既懂会计又熟悉大数据分析的复合型人才。该专业的学生将会学习以下主要课程内容&#xff1a; 会计基础课程&#xff1a;包括基础会计、财务会计、成本会计、管理会计等&#xff0c;这些…

如何搜索空文件夹_名称为(纯或含)中/英/数/符

首先&#xff0c;需要用到的这个工具&#xff1a; 度娘网盘 提取码&#xff1a;qwu2 蓝奏云 提取码&#xff1a;2r1z 打开工具&#xff0c;切换到批量文件复制版块&#xff0c;快捷键Ctrl5 点击右侧的搜索添加 设定要搜索的范围、指定为文件夹、包括子目录&#xff0c;勾选…

SSM整合-前后端分离-项目环境搭建 (上)

整合SSM 项目基础环境搭建项目介绍创建项目项目全局配置web.xmlSpringMVC配置配置Spring和MyBatis, 并完成整合创建表, 使用逆向工程生成Bean, XxxMapper和XxxMapper.xml注意事项和细节说明 实现功能01-搭建Vue前端工程需求分析/图解代码实现搭建Vue前端工程vue3项目目录结构梳…

宜选影票在线选座电影票小程序开发如何获取api接口?

要开发一个在线选座电影票小程序并获取API接口&#xff0c;你需要遵循几个关键步骤。以下是通常的流程&#xff1a; 明确需求和目标&#xff1a; 在开始之前&#xff0c;明确你的小程序需要哪些功能&#xff0c;例如电影查询、场次查询、在线选座、购票支付等。确定你需要从AP…

【智能优化算法】野狗智能优化算法(Dingo Optimization Algorithm DOA)

野狗智能优化算法(Dingo Optimization Algorithm DOA)是期刊“MATHEMATICAL PROBLEMS IN ENGINEERING”的2021年智能优化算法 01.引言 野狗智能优化算法(Dingo Optimization Algorithm DOA)该算法的灵感来自野狗的狩猎策略&#xff0c;即迫害攻击&#xff0c;分组策略和清除行…

VS Code中PlatformIO IDE的安装并开发Arduino

VS Code中PlatformIO IDE的安装并开发Arduino VS Code的安装 略 PlatformIO IDE的安装 PlatformIO IDE是是什么 PlatformIO IDE 是一个基于开源的跨平台集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于嵌入式系统和物联网&#xff08;IoT&#xff09;开发。…

2009-2022年上市公司华证ESG评级评分数据(含细分项)

2009-2022年上市公司华证ESG评级评分数据&#xff08;含细分项&#xff09; 1、时间&#xff1a;2009-2022年 2、来源&#xff1a;华证ESG 3、指标&#xff1a;证券代码、证券简称、综合评级、年度、综合得分、E评级、E得分、S评级、S得分、G评级、G得分 4、范围&#xff1…

如何解决3D模型变黑或贴图不显示的问题---模大狮模型网

在进行3D建模和视觉渲染时&#xff0c;经常会遇到模型表面变黑或贴图不显示的问题&#xff0c;这可能严重影响最终视觉效果的质量。这些问题通常与材质设置、光照配置或文件路径错误有关。本文将探讨几种常见原因及其解决方法&#xff0c;帮助3D艺术家和开发者更有效地处理这些…

Portforge:一款功能强大的轻量级端口混淆工具

关于Portforge Portforge是一款功能强大的轻量级端口混淆工具&#xff0c;该工具使用Crystal语言开发&#xff0c;可以帮助广大研究人员防止网络映射&#xff0c;这样一来&#xff0c;他人就无法查看到你设备正在运行&#xff08;或没有运行&#xff09;的服务和程序了。简而言…

ubuntu20安装colmap

系统环境 ubuntu20 &#xff0c;cuda11.8 &#xff0c;也安装了anaconda。因为根据colmap的官方文档说的&#xff0c;如果根据apt-get安装的话&#xff0c;默认是非cuda版本的&#xff0c;而我觉得既然都安装了cuda11.8了&#xff0c;自然也要安装cuda版本的colmap。 安装步骤…

MySQL之聚合函数与应用

1. 前言 上文我们讲到了单行函数.实际上SQL还有一类叫做聚合函数, 它是对一组数组进行汇总的函数, 输入的是一组数据的集合, 输出的是单个值. 2. 聚合函数 用于处理一组数据, 并对一组数据返回一个值. 有如下几种聚合函数 : AVG(), SUM(), MAX(), MIN(), COUNT(). 3. AVG(…

[Scrcpy]数据线连接安卓手机投屏windows电脑[win控制安卓手机]比Samsung Dex好用

配置好&#xff0c;只需要两步即可完成安卓手机投屏windows 第一步&#xff1a;usb线连接windows电脑 第二步&#xff1a;cmd输入投屏命令srccpy 搞定 前言/背景 一些视频资料只能下载到手机&#xff0c;很不喜欢手机那么小屏幕播放&#xff0c;播放很不方便 在家的话可以投…

在做题中学习(50):搜索插入位置

35. 搜索插入位置 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a;二分查找 思路&#xff1a;题目是有序的&#xff0c;时间复杂度O(logN),二分没跑了&#xff0c;题目说如果找不到target&#xff0c;返回它应该被插入位置的下标&#xff0c;所以可以分析一下示例2…

QT截图程序,可多屏幕截图

截图程序&#xff0c;支持多屏幕时跨屏幕截图。截图使用setMask达到镂空效果&#xff0c;截图后会有预览和保存功能。截图时按下Esc可退出。 mainwindow.ui mainwindow.cpp #include "mainwindow.h" #include "ui_mainwindow.h" #include <QDebug> …