目的：使用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

layui.config({
    base: '/ext/',   // 第三方模塊所在目錄
    version: 'v1.6.4' // 插件版本號
}).extend({                         
    soulTable: 'soulTable/soulTable.slim'    // 模塊
});

三、Layui實際使用

1、html代碼

有幾個需要註意的地方：

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

2、lay-event對應下麵的toolbar

<div class="layui-form layui-card-header layuiadmin-card-header-auto">
    <!-- 搜索 start -->
    <form  class="layui-form layui-form-pane"  style="float:left">
        <div class="layui-form-item">
            <label class="layui-form-label">視頻名稱</label>
            <div class="layui-input-inline">
                <input type="text" name="filename" placeholder="視頻名稱" autocomplete="off" class="layui-input" value="">
            </div>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="demo-table-search">
                <i class="fa fa-search" aria-hidden="true"></i> 搜 索
            </button>
        </div>
    </form>
    <!-- 搜索 end -->
    
</div>
 
<div class="layui-card-body" style="width: 96%; margin: 0 auto; overflow-x: auto;">
    <table id="myTable" lay-filter="test" id="test"></table>
    <!-- <script type="text/html" id="myBar"> </script> -->
    
    <script type="text/html" id="preview">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="preview"> <i class="fa fa-eye" aria-hidden="true"></i> 預覽</button>
    </script>
    <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit"><i class="fa fa-edit" aria-hidden="true"></i> 修改 </a>
            <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del"> <i class="fa fa-trash" aria-hidden="true"></i> 刪除</a>
    </script>
</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的不同，處理不同的業務

layui.config({
    base: '/ext/',   // 第三方模塊所在目錄
    version: 'v1.6.4' // 插件版本號
}).extend({                         
    soulTable: 'soulTable/soulTable.slim'    // 模塊
});
 
layui.use(['element', 'layer','form','table','soulTable'], function(){
    var $ = layui.jquery
    ,layer = layui.layer
    ,element = layui.element
    ,form = layui.form
    ,table = layui.table
    ,soulTable = layui.soulTable;
 
    var myTable = table.render({
        id: 'myTable'
        ,elem: '#myTable'
        ,url: 'videoquery'
        // ,toolbar: '#myBar'
        ,height: 500
        ,rowDrag: {done: function(obj) {
            // 完成時（鬆開時）觸發
            // 如果拖動前和拖動後無變化，則不會觸發此方法
            // console.log(obj.row) // 當前行數據
            // console.log(obj.cache) // 改動後全表數據
            // console.log(obj.oldIndex) // 原來的數據索引
            // console.log(obj.newIndex) // 改動後數據索引
 
            var row_id = obj.row.id      // 當前id
            var row_sort = obj.newIndex+1         // 拖動後的排序
 
            // console.log(row_id)
            // console.log(row_sort)
 
            $.ajax({
                url:'/teacher/video/upsort',
                type:'POST',
                dataType:'JSON',
                data:{id:row_id,sort:row_sort},
                success:function (res) {
                    console.log(res)
                    layer.msg(res.message, {
                      time: 2000 //2秒關閉（如果不配置，預設是3秒）
                    }, function(){
                      //do something
                        location.reload()
                    });
                }
            })
        }}
        ,totalRow: true
        ,cols: [[
            {field: 'filename', title: '視頻名稱', width: '20%', fixed: 'left'},
            {field: 'kejian', title: '關聯課件', width: '30%', height:'auto', fixed: 'left'},
            {fixed: 'right', title:'預覽', toolbar: '#preview', width:'20%'},
            {fixed: 'right', title:'操作', toolbar: '#barDemo', width:'30%'}
        ]]
        ,page: true
        ,done: function () {
            soulTable.render(this)
        }
    });
 
    // 搜索提交
  form.on('submit(demo-table-search)', function(data){
    var field = data.field; // 獲得表單欄位
    // console.log(field)
    // 執行搜索重載
    table.reload('myTable', {    
      page: {
        curr: 1 // 重新從第 1 頁開始
      },
      where: field // 搜索的欄位
    });
    return false; // 阻止預設 form 跳轉
  });
 
    //監聽行工具事件
    table.on('tool(test)', function(obj){
        var data = obj.data;
        //console.log(obj)
        if(obj.event === 'preview'){
            // console.log(data)
            // 預覽
              window.open(data.path);
        }else if(obj.event === 'del'){
            // console.log(data.id)
            layer.confirm('確定刪除嗎？', {icon: 3, title:'提示'}, function(index){
                  $.ajax({    
                    url:"del",
                    type:"POST",
                    dataType:"JSON",
                    data:{id:data.id},
                    success:function (res) {
                        if (res.code == 200) {
                            layer.msg(res.message);
                            obj.del();
                        }else{
                            layer.msg(res.message);
                            return false;
                        }
                    }
                })
              });
        } else if(obj.event === 'edit'){
            // console.log(data.id)
          window.location.href='edit.html?id='+data.id;
        }
    });
 
});  

3、PHP後臺代碼

主要是添加了搜索，返回的是JSON數據

public function videoquery()
 {
    $map = array();
    $page = input('page');  //頁碼
    $limit = input('limit');  //分頁
 
    $filename = trim(input('param.filename'));
    if (!empty($filename)) {
        $map['video.filename'] = array('like',"%$filename%");
    }
    
    // 列表
    $data= model('Video')->getList($this->tid,$map,$page,$limit);
    // 個數
    $count = model('Kejian')->gerKejianCount($this->tid,$map);
 
    $result = array(
       'code'=>0,
       'msg'=>'',
       'count'=>$count,
       'data'=> $data
    );
    return $result;
 }