Layui——使用插件实现：table表格行顺序的改变

最新推荐文章于 2025-03-29 16:23:32 发布
最新推荐文章于 2025-03-29 16:23:32 发布
阅读量2.7k 收藏 5
点赞数
分类专栏： LayUI 文章标签： layui-soul-table layui table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jongsuk_sun/article/details/103281093
版权
本文介绍了如何借助layui-soul-table插件实现layui表格中行顺序的改变。首先，确保按照官方步骤完整引入插件，避免因只导入部分文件导致的错误。操作流程包括：用户拖动行触发更改，服务器端更新数据序号，前端通过回调函数重载表格以反映排序变化。同时，文章讨论了新增和删除数据时序号处理的细节，以及实现上移和下移功能的难点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考：https://saodiyang.gitee.io/layui-soul-table/#/zh-CN/component/basic/row-drag

使用的是layui-soul-table插件

注意：严格按照官网的安装步骤执行，（自己存在的问题：因为自己项目的要求只需要实现行移动，所以就以为这个插件下的js文件只需要导入soulTable.js。结果报错。。。所以还是全部导入就好了）

实现思路：页面触发行移动的操作（通过layui-soul-table插件实现）》访问服务器修改修改数据库中存储的数据序号

》回到前端，回调函数：重载表格（表格顺序是按数据序号排序的）》这样就实现了数据排序的变化

 除此自外还需要考虑：1.新增的数据序号应该是：新增前最大序号+1=》实现：将序号从0开始，那么新增数据的序号就是数据总数（复合sql）： insert into course
        (cname,pl_id,season,time,weather,l_id,csort)
  

最低0.47元/天 解锁文章
layui列表拖动排序_layui中table的sort排序介绍
weixin_39723248的博客
12-19 1257
今天来谈谈table sort的那点事。预告一下，目的是做到前台排序还有服务器排序区分开，目前的table的分页实际是比较“乱”的，相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到不正常的情况。先看看目前layui自带的排序的效果，中文按字典排序这些不是本次讨论的重点，先看看如果存在整数负数还有0出现的情况那么是不是调整一下sort里面的逻辑就可以了让它对负数和0的判断逻辑对...
LayUI——下载表格
jongsuk_sun的博客
08-27 3543
参考：https://www.cnblogs.com/buwang/p/10735449.html 在layui基础上使用插件;https://github.com/wangerzi/layui-excel 阅读：快速上 目的： 实现： 代码实现： <div class="layui-content"> <div cl...
layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
05-05
给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档： 国内下载地址: 扩展功能 表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看 ） 拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列顺序导出） 子表（表中表、无限层级、子表同样支持前3个功能） 5.拖动行 6.右击快捷菜单 7.合计栏支持固定列 8.双击自适应列宽 9.右侧固定列 列宽拖动改到单元格左侧 效果 1.表头筛选效果 2.编辑筛选效果 筛选明代姓张的 或 唐代姓李的的诗词 3.拖动列调整顺序、隐藏显示列 左右拖动调整顺序，鼠标移出表格后松开--快速隐藏列 4.子表 快速上手 1.将下面模块放到自己项目中: soulTable.js 总入口 tableFilter.js 表头筛选 excel.js excel导出 tableChild.js 子表
Layui实现table动态添加行，可删除、表格可编辑，小数校验
最新发布
qq_35683545的博客
03-29 697
实现如图需求，layui实现的可编辑table，包含B、C、D、E列，A列不用实现出现，A列放在附件就是让你明白，不同的物料名称，行是不一样的。除了头部表头和E列不能编辑，每个表格都可编辑，其中会传过来一个总的重量weight，E列是根据D列填写的百分比自动相乘计算的，其中行都是动态变化的，工具栏有个新增按钮，点击新增按钮，就会增加一行，点击行的删除按钮，就会删除直接上代码。
Layui选择单选框实现table行上下移动，并实现数据的排序
u013733643的博客
03-22 1972
由于表格是layui的方法渲染完成的，所以使用js无法获取到某个表格的tr（等待方法），只能使用layui的方法table.cache.testReload（testReload为table.render中的id）；so，在上下移动的时候就可以把表格数据进行交换（比如：上移某行时，把这行数据和他上一行的数据交换），这样不论怎么移动，最终表格数据都是移动之后的。// 用于存放elementKey和elementOrder，主键和排序字段，用于后台更新。// 未上移前，记录本行和下一行的数据。
layui table 光标根据上下左右按键在table中移动并选中单元格内容
Mr_ZhangAdd的博客
06-01 1697
layui table 光标根据上下左右按键在table中移动
【Layui表格行勾选的单元测试】：保障功能稳定性与可靠性
![【Layui表格行勾选的单元测试】：保障功能稳定性与可靠性]...本文综合探讨了Layui前端框架中表格行勾选功能的实现原理及其在单元测试实践中的应用。首先概述了单元测试的基本理论，包括定
SSM项目——开放平台管理平台（开放源码）
山高水长
11-09 3288
l 文章目录一、 引言1.1 开放平台介绍1.2 开放平台的使用场景二 、开放平台之管理平台2.1 管理平台介绍2.2 客户管理2.2.1 介绍2.2.2 功能展示2.2.2 数据库结构2.3 应用管理2.3.1 介绍2.3.2 功能展示2.3.3 数据库结构2.4 路由管理2.4.1 介绍2.4.2 功能展示2.4.3 数据库结构2.5 系统参数管理2.5.1 介绍2.5.2 功能展示2.5.3 数据库结构2.6 Token 管理2.6.1 介绍2.6.2 功能展示2.6.3 数据库结构2.7 充值管理2
java人力资源管理系统工作职责_JavaWeb课设——人力资源管理系统
weixin_34676828的博客
02-13 1777
一、实验选题1.1实验内容本次课程设计内容为基于JavaWeb的人力资源管理系统。主要的工作如下：①管理员用户的登录。②实现管理企业的员工信息。③实现管理企业的部门信息。④实现企业的应聘信息的管理功能。⑤实现企业员工培训的一系列相关信息的管理。⑥实现企业奖惩信息的管理。⑦实现员工薪酬信息的管理。⑧实现管理员账户信息的管理。⑨实现安全退出系统1.2相关技术及工具主要工具为Java+Tomcat8.5...
table表格中，上移，下移
猴子年华的专栏
04-16 2221
// tr上移 function moveUp(obj) { var current = $(obj).parent().parent().parent(); //获取当前<tr> var prev = current.prev(); //获取当前<tr>前一个元素 if (current.index()...
table表格内容上下移动的三种实现方法
05-07
该代码为大家展示了table表格内容上下移动的三种实现方式，通俗易懂
js表格行上移下移置顶置底
12-19
支持所有浏览器，包过IE6-8,支持多选行操作，支持不连续选择行表格操作，操作按钮单独分开的。
layui列表拖动排序_通过拖动表格行进行行排序
weixin_39731271的博客
12-19 1919
参考原文链接：在最近的项目中，我们有这样一个需求，要手动拖动html table中的行(tr)进行排序，就是我可以将第一行拖到第三行，第四行拖到六行这样子。一开始我想起了jquery ui中的sortable，发现没有这样的例子。一筹莫展，于是谷歌之，发现了这位大神的回复。原来人家还是用了jquery ui的sortableHTML需要引入jquery和jquery ui的js文件No.YearT...
Layui的修改排序码
weixin_57770064的博客
05-08 602
tabTitles2 = layuiTable.render({ elem: '#GoodsType2',//容器 url: 'selectGoodsType', id: 'idTest2', cols: [[ { type: 'numbers', title: '序号...
layui 利用tab选项卡实现：上一步，下一步操作
u014206461的博客
12-22 2324
虽然闲心大大已经关闭layui官网，可他一直是我们jQuery族的骄傲，话不多说了 效果如下： CSS /* 顺序tab */ .order_tab .layui-tab-title{border: none !important;text-align: center;} .order_tab .layui-tab-title li+li{margin: 0 0 0 50px;} .order_tab .layui-tab-title li>span{width: 35px; height: 3.
layui加JQuery实现上移下移，上移到顶，下移到底
weixin_44504938的博客
12-20 2031
思路：是将查出来的数据重新排序（主要是唯一ID及其数据位置调整）后台设置序号。只支持单选代码如何： 第一步 var data_tr; //触发单选框选择 table.on(‘radio()’, function(obj){ //test 是 table 标签对应的 lay-filter 属性 data_tr = $(this); }); // 上移 function uptr() { // 拿到列表集合 var datas = layui.table.cache[“list”]; // 拿到选中的数据 va
Layui布局变化利用style改变布局
weixin_44550209的博客
06-09 3800
作者：李国林 再很多时候，我们在学习MVC或者页面的布局的时候，我们都会有很多的插件来完成，而这些插件都是已经封装好的样式在里面，然而，如果是自己第一次布局，就会有一点是手足无措，因此，我们在搭建页面的时候就会出现很多问题，即使是html里面进行页面布局，有时候也会有一点错误，因为有一些插件已经是封装好的，因此我们是引用他的样式，然后进行里面的样式进行用，但是有一些样式的位置就会有一些是不符合我们...
layui 自定义排序_thinkphp5+layui异步修改排序
weixin_42407617的博客
02-01 228
thinkphp5 layui异步修改排序html代码js代码functionchangeSort(obj,fw_id){//获取修改完成之后的排序值varchaxuncishu=$(obj).val();//layer.msg(chaxuncishu);//layer.msg(fw_id);$.post("{:url('admin/fangwei/editcishu')}",{chaxu...
fastadmin tree
02-13
### FastAdmin框架中的树形结构实现与使用 FastAdmin是一款基于ThinkPHP5开发的企业级后台管理框架，其设计目标是为了简化企业级应用的快速开发过程。对于树形结构的支持，在FastAdmin中主要通过特定的数据表设计以及前端组件来共同完成。 #### 数据库设计模式 为了支持树状数据模型，通常采用两种常见的数据库设计方案之一：邻接列表模型（Adjacency List Model）和闭包表（Closure Table）。在FastAdmin项目里更倾向于前者——即每个节点存储指向父节点ID的方式构建层次关系[^1]。 ```sql CREATE TABLE `category` ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255), pid INT DEFAULT 0 COMMENT 'Parent ID', path VARCHAR(255) NULL COMMENT 'Path for fast query' ); ``` 此SQL语句创建了一个名为`category`的表格用于保存分类信息，并包含了字段`pid`表示上级类别编号，默认值设为根级别；另外还定义了可选路径字段`path`以便加速查询操作。 #### 后端逻辑处理 当涉及到获取整个树或部分子树时，可以利用递归函数遍历所有后代节点并形成完整的层级视图。下面是一个简单的PHP示例代码片段展示如何读取指定节点及其子孙： ```php function getTree($parentId = 0){ $result = []; foreach ($categories as &$item){ if ($item['pid'] == $parentId){ unset($item['children']); $childItems = getTree($item['id']); // Recursive call to find children. if (!empty($childItems)){ $item['children'] = $childItems; } array_push($result,$item); } } return $result; } ``` 这段脚本实现了从给定父项开始检索所有下层元素的功能，并将它们按照父子顺序整理成一个多维数组返回。 #### 前端显示优化 为了让用户直观地看到这些分层的信息，FastAdmin集成了多种流行的JavaScript插件如zTree、layui Tree等来进行可视化呈现。开发者只需遵循官方文档说明配置相应参数即可轻松实现场景需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值