近期有一个小需求要做数据的排序，小批量数据的排序就找到了layui公公组件里面有不错的，用一下，记录一下踩的坑

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

这里用到了layui-soul-table 还是很好用的，近期还兼容了最新的layui的2.8，看来作者也是一直关注layui呢，直接上代码，自己看着弄

1、引入框架和下载文件官方都说清楚了

2、配置模块

3、在侧边栏找自己需要的功能，也有实例代码，还能直接调试很方便，我这次只用到了拖拽行，看了看其他的功能还是很厉害的，下次试试导出功能，还挺方便的还能导出分也数据，每次去请求接口，这样数据量还可以的话就不用单独写接口或者python处理导出

4、上代码，注意看里面的注释，这里就不多做解释了

这里可别忘了引入css

<link rel="stylesheet" href="__ADMIN__/soulTable/soulTable.css" media="all"/>

这里是html代码，拉进去就可以用

<div class="body-wrapper">
    <table id="data-table" lay-filter="table-list"></table>
</div>
<script type="text/html" id="myBar">
    <div>
        行拖拽: <input type="checkbox" lay-skin="switch" lay-filter="rowDragSwitch" lay-text="启用|暂停" checked>
    </div>
</script>

下面的是js代码

// 配置文件， base直接是放所需js的目录即可，extend是所需js文件名称 layui-soul-table组件很好同
layui.config({
    base: '__ADMIN__/soulTable/ext/',   // 第三方模块所在目录
    version: 'v1.6.4'                   // 插件版本号
}).extend({                         
    soulTable: 'soulTable'
});
   layui.use(['form', 'table', 'jquery', 'element', 'upload','soulTable'], function(){
         var table = layui.table,
         $ = layui.jquery,
         form = layui.form,
         upload=layui.upload,
         soulTable = layui.soulTable;

       var tableObj = table.render({
          id : "data-table",
          elem : "#data-table",
          url : "{:url()}",
          method : "post",
          height: 500,
          rowDrag: {trigger: 'row', done: function(obj) { // trigger: 'row' 参数要不删除要不就留下，文档注释了，导致一直报错 - 坑
          // 排序改动后数据
          order_data = obj.cache 
          console.log(order_data)
          // 通过ajax调接口处理数据的排序
          $.ajax({
              url: "{:url()}", 
              type: 'post',  
              dataType: 'json',  
              success: function(data) {
              if(data.code == 200){
                 layer.msg('排序成功，请前往H5查看',{icon:1}) 
              } else{
                 layer.msg('排序失败，请联系管理员',{icon:2}) 
                 return false; 
              } 
             },
             error: function(jqXHR, textStatus, errorThrown) {  
                 layer.msg('排序失败，请联系管理员',{icon:2}) 
                 return false;  
              } 
            });
           }},
          toolbar: '#myBar',              // 当前展示行拖拽开关，不展示直接配置true
          drag: false,               // 关闭列拖拽列功能，没配置列拖拽
          defaultToolbar : ['filter', {
          title : '导出',
          layEvent : 'custom_exports',
          icon : 'layui-icon-export'
           }],
           cols : [[
               {"field":"id","title":"id"},
               {"field":"userid","title":"ehr号"},
               {"field":"name","title":"姓名"},
               {"field":"mobile","title":"手机号"},
           ]],done: function () {
               soulTable.render(this)
           },
           page : {
           limit : 10,
           curr : 1,
           groups : 5,
           layout : ["count","prev","page","next","limit"]
         }
       });
       form.on('switch(rowDragSwitch)', function(data){
          soulTable.suspend('data-table', 'rowDrag', !data.elem.checked)  // 第一个参数是tableObj 表格里面的id参数
       });