• 【前端】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">
    2. 	
    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>
    14. 	
    15. 	
    16. div>
    17.  
    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>
    20. 	
    21. 	
    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. });
    7.  
    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;
    15.  
    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) // 改动后数据索引
    29.  
    30.             var row_id = obj.row.id  	// 当前id
    31.             var row_sort = obj.newIndex+1 		// 拖动后的排序
    32.  
    33.             // console.log(row_id)
    34.             // console.log(row_sort)
    35.  
    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.     });
    64.  
    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.   });
    78.  
    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. 	});
    111.  
    112. });

    3、PHP后台代码

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

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

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

    Jquery UI +PHP 实现表格拖动排序icon-default.png?t=N7T8https://blog.csdn.net/qq_25285531/article/details/134287545?spm=1001.2014.3001.5502

  • 相关阅读:
    Elasticsearch从入门到精通-04ES高级语法
    docker 安装kkFileView教程
    【无标题】
    UE5 实现fps类游戏 note2
    LeetCode 2354. 优质数对的数目 二进制01表示和集合之间的转换
    NetSuite 10个用户参数
    cmake-format使用教程
    【c++】 继承的相关问题
    技术策划学习 —— 引擎工具链高级概念与应用
    铁路牵引变电所智能运维研究
  • 原文地址：https://blog.csdn.net/qq_25285531/article/details/132627560