【前端】Layui动态数据表格拖动排序

目录

一、下载layui-soul-table

二、使用

三、Layui实际使用

1、html代码

2、JS代码

3、PHP后台代码

目的：使用Layui的数据表格，拖动行进行排序。

使用插件：layui-soul-table 和 Layui  

1.layui-soul-table文档：https://soultable.yelog.org/#/zh-CN/component/start/install

2.layui文档：Layui table模块 | 数据表格 | datatable - 在线演示

结合Layui并参看layui-soul-table官方教程，写的比较详细页比较简单。

实现效果：可以拖动行进行排序，可以搜索

一、下载layui-soul-table

把下载好的文件放到项目中，比如说放到public文件夹下的/ext/soulTable/下，下载的内容很多，不需要全部都放到目录下，只需要把用到拷贝进来就行，如下图

二、使用

因为需求是实现拖动排序，所以只用到了soulTable.slim.js

1. layui.config({
2. base: '/ext/', // 第三方模块所在目录
3. version: 'v1.6.4' // 插件版本号
4. }).extend({
5. soulTable: 'soulTable/soulTable.slim' // 模块
6. });

三、Layui实际使用

1、html代码

有几个需要注意的地方：

1、搜索按钮的lay-filter要一致

2、lay-event对应下面的toolbar

1. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
3. <form class="layui-form layui-form-pane" style="float:left">
4. <div class="layui-form-item">
5. <label class="layui-form-label">视频名称label>
6. <div class="layui-input-inline">
7. <input type="text" name="filename" placeholder="视频名称" autocomplete="off" class="layui-input" value="">
8. div>
9. <button class="layui-btn layui-btn-normal" lay-submit lay-filter="demo-table-search">
10. <i class="fa fa-search" aria-hidden="true">i> 搜 索
11. button>
12. div>
13. form>
16. div>
18. <div class="layui-card-body" style="width: 96%; margin: 0 auto; overflow-x: auto;">
19. <table id="myTable" lay-filter="test" id="test">table>
22. <script type="text/html" id="preview">
23. <button type="button" class="layui-btn layui-btn-sm" lay-event="preview"> <i class="fa fa-eye" aria-hidden="true">i> 预览button>
24. script>
25. <script type="text/html" id="barDemo">
26. <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit"><i class="fa fa-edit" aria-hidden="true">i> 修改 a>
27. <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del"> <i class="fa fa-trash" aria-hidden="true">i> 删除a>
28. script>
29. div>

2、JS代码

1、引入soulTable，注意路径，我存放的路径是在/public/ext/soulTable/下

2、extend引入的模块可以根据自己需求添加

3、table.render()下的id和elem要和上面HTML中的table的id一致

4、rowDrag下的done里面的是拖动时触发的事件，可以从这里获取拖动行的数据信息，并在这里更新数据库

5、cols里的就是列名，列名对应上就行

6、done下的代码是刷新拖动之后的表格的，勿删

7、搜索提交：其实就是数据表格的重载，可以参考Layui官网，我这里为了后端接收方便，所有和Layui官网的示例有些出入。注意lay-filter监听要一致，其中table.reload下的myTable也要和上面HTML的一致，用于标识重载的表格

8、监听行工具事件：根据event的不同，处理不同的业务

1. layui.config({
2. base: '/ext/', // 第三方模块所在目录
3. version: 'v1.6.4' // 插件版本号
4. }).extend({
5. soulTable: 'soulTable/soulTable.slim' // 模块
6. });
8. layui.use(['element', 'layer','form','table','soulTable'], function(){
9. var $ = layui.jquery
10. ,layer = layui.layer
11. ,element = layui.element
12. ,form = layui.form
13. ,table = layui.table
14. ,soulTable = layui.soulTable;
16. var myTable = table.render({
17. id: 'myTable'
18. ,elem: '#myTable'
19. ,url: 'videoquery'
20. // ,toolbar: '#myBar'
21. ,height: 500
22. ,rowDrag: {done: function(obj) {
23. // 完成时（松开时）触发
24. // 如果拖动前和拖动后无变化，则不会触发此方法
25. // console.log(obj.row) // 当前行数据
26. // console.log(obj.cache) // 改动后全表数据
27. // console.log(obj.oldIndex) // 原来的数据索引
28. // console.log(obj.newIndex) // 改动后数据索引
30. var row_id = obj.row.id // 当前id
31. var row_sort = obj.newIndex+1 // 拖动后的排序
33. // console.log(row_id)
34. // console.log(row_sort)
36. $.ajax({
37. url:'/teacher/video/upsort',
38. type:'POST',
39. dataType:'JSON',
40. data:{id:row_id,sort:row_sort},
41. success:function (res) {
42. console.log(res)
43. layer.msg(res.message, {
44. time: 2000 //2秒关闭（如果不配置，默认是3秒）
45. }, function(){
46. //do something
47. location.reload()
48. });
49. }
50. })
51. }}
52. ,totalRow: true
53. ,cols: [[
54. {field: 'filename', title: '视频名称', width: '20%', fixed: 'left'},
55. {field: 'kejian', title: '关联课件', width: '30%', height:'auto', fixed: 'left'},
56. {fixed: 'right', title:'预览', toolbar: '#preview', width:'20%'},
57. {fixed: 'right', title:'操作', toolbar: '#barDemo', width:'30%'}
58. ]]
59. ,page: true
60. ,done: function () {
61. soulTable.render(this)
62. }
63. });
65. // 搜索提交
66. form.on('submit(demo-table-search)', function(data){
67. var field = data.field; // 获得表单字段
68. // console.log(field)
69. // 执行搜索重载
70. table.reload('myTable', {
71. page: {
72. curr: 1 // 重新从第 1 页开始
73. },
74. where: field // 搜索的字段
75. });
76. return false; // 阻止默认 form 跳转
77. });
79. //监听行工具事件
80. table.on('tool(test)', function(obj){
81. var data = obj.data;
82. //console.log(obj)
83. if(obj.event === 'preview'){
84. // console.log(data)
85. // 预览
86. window.open(data.path);
87. }else if(obj.event === 'del'){
88. // console.log(data.id)
89. layer.confirm('确定删除吗？', {icon: 3, title:'提示'}, function(index){
90. $.ajax({
91. url:"del",
92. type:"POST",
93. dataType:"JSON",
94. data:{id:data.id},
95. success:function (res) {
96. if (res.code == 200) {
97. layer.msg(res.message);
98. obj.del();
99. }else{
100. layer.msg(res.message);
101. return false;
102. }
103. }
104. })
105. });
106. } else if(obj.event === 'edit'){
107. // console.log(data.id)
108. window.location.href='edit.html?id='+data.id;
109. }
110. });
112. });

3、PHP后台代码

主要是添加了搜索，返回的是JSON数据

1. public function videoquery()
2. {
3. $map = array();
4. $page = input('page'); //页码
5. $limit = input('limit'); //分页
7. $filename = trim(input('param.filename'));
8. if (!empty($filename)) {
9. $map['video.filename'] = array('like',"%$filename%");
10. }
12. // 列表
13. $data= model('Video')->getList($this->tid,$map,$page,$limit);
14. // 个数
15. $count = model('Kejian')->gerKejianCount($this->tid,$map);
17. $result = array(
18. 'code'=>0,
19. 'msg'=>'',
20. 'count'=>$count,
21. 'data'=> $data
22. );
23. return $result;
24. }

另外一种使用jquery ui实现表格拖动排序 

Jquery UI +PHP 实现表格拖动排序https://blog.csdn.net/qq_25285531/article/details/134287545?spm=1001.2014.3001.5502