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;code>

}

});

});

3、PHP后台代码