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),则需要减少中间行的xlhif (oldIndex > newIndex) {for (let i = newIndex + 1; i < oldIndex; i++) {cache[i].xlh--;}}// 如果是向后移动(oldIndex < newIndex),则需要增加中间行的xlhelse if (oldIndex < newIndex) {for (let i = oldIndex; i < newIndex; i++) {cache[i].xlh++;}}// 直接根据新的索引位置更新修改行的xlhmodifiedRow.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.mzph.cn/web/7578.shtml

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

相关文章

检测服务器环境,实现快速部署。适用于CRMEB_PRO/多店

运行效果如图&#xff1a; 最近被好多人问&#xff0c;本来运行的好好的&#xff0c;突然swoole就启动不了了。 本工具为爱发电&#xff0c;如果工具正好解决了您的需求。我会很开心 代码如下&#xff1a; """本脚本为爱发电by:网前雨刮器 """…

如何翻译外文文献【攻略】

如何翻译外文文献【攻略】 前言版权推荐如何翻译外文文献简单描述第一步 准备一篇外文文献第二步 翻译网站第三步 解锁文档第四步 编辑dpf第五步 pdf转为word第六步 编辑word第七步 word转为pdf 最后 前言 2024-5-7 14:50:14 以下内容源自《【攻略】》 仅供学习交流使用 版权…

【全网首发】Typecho文章采集器火车头插件去授权版

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 目前市面上基本没有typecho火车头采集器 而分享的这一款采集器&#xff0c;牛的一批 内置使用方法与教程&#xff01; 二、效果展示 1.部分代码 代码如下&#xff08;示例&#…

串的模式匹配之KMP算法实现

概述 函数刻画 主串位置不变&#xff0c;next值就是模式串(子串)比较后应跳转的位置 不同位置 next[j]函数 next由模式串决定&#xff0c;看模式串当前比较位的前串中前后缀相同的个数来得k-1的值&#xff0c;next[当前位]k1 小补充 PM值&#xff1a;也称部分匹配值&#xf…

Redis Cluster on K8s 大揭密

之前我们针对 Redis 容器化&#xff0c;做了一些讨论&#xff1a; 《Redis 容器化&#xff0c;是不是个“软柿子”》&#xff0c;业界不乏相关的实践分享&#xff0c;KubeBlocks 也针对 Redis Cluster 做了适配并有对应的解决方案。在 Redis 容器化的过程中&#xff0c;KubeBlo…

【学习AI-相关路程-工具使用-NVIDIA SDK MANAGER==NVIDIA-jetson刷机工具安装使用 】

【学习AI-相关路程-工具使用-NVIDIA SDK manager-NVIDIA-jetson刷机工具安装使用 】 1、前言2、环境配置3、知识点了解&#xff08;1&#xff09;jetson 系列硬件了解&#xff08;2&#xff09;以下大致罗列jetson系列1. Jetson Nano2. Jetson TX23. Jetson Xavier NX4. Jetson…

YouTube广告全教学:形式、投放步骤与技巧(2024年更新)

YouTube作为全球最大的视频分享和观看平台吸引了大量的观众&#xff0c;这一平台以其无与伦比的用户参与度和覆盖范围&#xff0c;重新定义了人们获取与分享知识的方式&#xff0c;同时也为企业开辟了一片前所未有的营销蓝海。 据统计&#xff0c;全球观众平均每天观看 YouTub…

超疏水TiO₂纳米纤维网膜的良好性能

超疏水TiO₂纳米纤维网膜是一种具有特殊性能的材料&#xff0c;它结合了TiO₂的光催化性能和超疏水表面的自清洁、防腐、防污等特性。这种材料在防水、自清洁、油水分离等领域具有广阔的应用前景。 制备超疏水TiO₂纳米纤维网膜的过程中&#xff0c;通过精确控制纺丝溶液的成分…

揭秘前端开发的“薪”机遇

众所周知&#xff0c;华为开发者大会2023&#xff0c;宣布不再兼容安卓&#xff0c;同时宣布了“鸿飞计划”&#xff0c;欲与iOS、安卓在市场三分天下&#xff0c;这对中国国产操作系统而言&#xff0c;具有划时代的意义。 最近有不少前端的开发者来咨询鸿蒙开发&#xff0c;今…

OpenNJet : 下一代云原生应用引擎

本心、输入输出、结果 文章目录 OpenNJet &#xff1a; 下一代云原生应用引擎前言OpenNJet 技术架构安装 OpenNJet为什么有了 OpenNJetOpenNJet 和 NGINX 是什么关系什么是云原生应用引擎&#xff1f;OpenNJet 的有哪些优势OpenNJet 的有哪些优势 OpenNJet 与国产化OpenNJet 使…

Llama 3 超级课堂

https://github.com/SmartFlowAI/Llama3-Tutorial/tree/main 第一节作业 streamlit run web_demo.py /root/share/new_models/meta-llama/Meta-Llama-3-8B-Instruct

一键静音,iPhone勿扰模式助你远离干扰

在现代社会的快节奏生活中&#xff0c;我们时常被各种各样的通知、铃声和提示音所打扰&#xff0c;无法专注地工作或享受宁静的时光。而iPhone的勿扰模式功能&#xff0c;就像是一位贴心的助手&#xff0c;能够一键帮你屏蔽这些干扰&#xff0c;让你在需要的时候拥有一个清静的…

窃鈇逃债,赧然惭愧——“天下共主”周赧王的结局

引子&#xff0c;债台高筑 周赧王五十九年&#xff08;前256年&#xff09;&#xff0c;雒邑王都内&#xff0c;大周第三十七代天子、年近八十的周赧王姬延困坐在王宫内的高台上&#xff0c;愁容满面、沮丧悲切、束手无策&#xff1b;而王宫宫墙外不远处&#xff0c;是一大帮举…

流畅的python-学习笔记_设计模式+装饰器+闭包

策略模式 类继承abc.ABC即实现抽象类&#xff0c;方法可用abc.abstractmethod装饰&#xff0c;表明为抽象方法 装饰器基础 装饰器实际是语法糖&#xff0c;被装饰的函数实际是装饰器内部返回函数的引用 缺点&#xff1a;装饰器函数覆盖了被装饰函数的__name__和__doc__属性…

暗区突围pc版steam叫什么 暗区突围无限steam怎么搜

暗区突围pc版steam叫什么 暗区突围无限steam怎么搜 最近游戏圈热度最高的事件肯定是暗区突围PC版本的上线&#xff0c;在上线之前就惹得各位游戏爱好者们频频侧目&#xff0c;在正式上线之后更是吸引了大批的新玩家老玩家进行游戏。可是许多玩家发现在steam上找不到游戏&…

视频改字祝福/豪车装X系统源码/小程序uniapp前端源码

uniapp视频改字祝福小程序源码&#xff0c;全开源。创意无限&#xff01;AI视频改字祝福&#xff0c;豪车装X系统源码开源&#xff0c;打造个性化祝福视频不再难&#xff01; 想要为你的朋友或家人送上一份特别的祝福&#xff0c;让他们感受到你的真诚与关怀吗&#xff1f;现在…

【Python深度学习(第二版)(1)】什么是深度学习,深度学习与机器学习的区别、深度学习基本原理,深度学习的进展和未来

文章目录 一. 深度学习概念二. 深度学习与机器学习的区别三. 理解深度学习的工作原理1. 每层的转换进行权重参数化2. 怎么衡量神经网络的质量3. 怎么减小损失值 四. 深度学习已取得的进展五. 人工智能的未来 - 不要太过焦虑跟不上 一. 深度学习概念 先放一张图来理解下人工智能…

618必买好物清单来袭,这些数码产品值得你考虑!

是不是很多朋友和我一样&#xff0c;已经迫不及待地为618好物节做好了准备&#xff0c;准备开启一场购物盛宴&#xff01;作为一名资深家居与数码爱好者&#xff0c;每年618好物节时我都会尽情挑选心仪的物品&#xff0c;因此今天我想和大家分享一下我的618购物清单&#xff0c…

智慧校园气象站有哪些优点

TH-XQ4智慧校园气象站具有多种优点&#xff0c;这些优点不仅提升了校园的气象监测能力&#xff0c;还为师生提供了更便捷、准确的气象服务。以下是智慧校园气象站的主要优点&#xff1a; 实时监测与预警&#xff1a;智慧校园气象站能够实时监测校园内的气象参数&#xff0c;如温…

Java--方法的使用

1.1什么是方法 方法顾名思义就是解决问题的办法&#xff0c;在程序员写代码的时候&#xff0c;会遇到很多逻辑结构一样&#xff0c;解决相同问题时&#xff0c;每次都写一样的代码&#xff0c;这会使代码看起来比较绒余&#xff0c;代码量也比较多&#xff0c;为了解决这个问题…