0
0

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

目的：使用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.     <!-- 搜索 start -->
  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.     <!-- 搜索 end -->
  15.     
  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>
  20.     <!-- <script type="text/html" id="myBar"> </script> -->
  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. });
  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.     }
  11.     
  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.  }
标签： layui 前端 javascript
本文转载自: https://blog.csdn.net/qq_25285531/article/details/132627560
版权归原作者 下页、再停留 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【前端】Layui动态数据表格拖动排序”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？