近期有一个小需求要做数据的排序,小批量数据的排序就找到了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参数
});
推荐