使用layui 表格,删除操作时遇到的问题,请见下方描述:
1、html 页面结构
<table lay-filter="tasktimer" id="tasktimer"></table>
<script type="text/html" id="barDemo2">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"></a>
</script>
2、渲染表格
//方法级渲染
var tasktimer = table.render({
elem: '#tasktimer'
, cols: [[{field: 'name', title: sceneName, width: 120}
, {field: 'path', title: time, width: 124}
, {fixed: 'right', width: 100, align: 'center', toolbar: '#barDemo2'}
]]
, btns: ['now', 'confirm']
, height: 433
, data: sceneTaskLists
, limit: 9
, page: {
layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
, groups: 2 //只显示 1 个连续页码
, first: false //不显示首页
, last: false //不显示尾页
},
done: function (res, curr) {
}
});
3、监听删除操作
table.on('tool(tasktimer)', function (obj) { //
let data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'del') {
console.log(data);
obj.del(); //删除对应行(tr)的DOM结构
sceneTaskRemove(data.id);
layer.msg("删除成功!", {icon: 1});
}
});
4、删除方法:
//删除
function sceneTaskRemove(id) {
for (let i = 0; i < sceneTaskLists.length; i++) {
if (id == sceneTaskLists[i].id) {
sceneTaskLists.splice(i, 1);
break;
}
}
}
5、运行以上代码:随便删除表格里的某一页的某一项时,不重新获取数据的情况下。如果不重新reload,再点击页码切换看到删除的数据还会存在表格里。所以需要reload,修改代码后如下:
//删除
function sceneTaskRemove(id) {
for (let i = 0; i < sceneTaskLists.length; i++) {
if (id == sceneTaskLists[i].id) {
sceneTaskLists.splice(i, 1);
break;
}
}
if (tasktimer) {
tasktimer.reload({
"data": sceneTaskLists
});
}
}
6、运行以上代码:加上reload,删除最后一页最后一条数据会直接显示无数据,页码也没有了,也不会跳到上一页去,修改代码后如下:
//删除
function sceneTaskRemove(id) {
for (let i = 0; i < sceneTaskLists.length; i++) {
if (id == sceneTaskLists[i].id) {
sceneTaskLists.splice(i, 1);
break;
}
}
var recodePage = $(".layui-show .layui-laypage-skip .layui-input").val();
tasktimer.reload({
"data": sceneTaskLists
, page: {
curr: recodePage - 1 //设定初始在第 5 页 //1 就是第一页
}
})
}
7、获取当前页码 var recodePage = $(".layui-show .layui-laypage-skip .layui-input").val();
运行以上代码:无论在哪页删除哪条数据都会返回到当前页的上一页去,如果 curr: 1 就都返回第一页。
我想要的效果是当前页删除完最后一条就自动返回上一页去。reload 会再触发render,所以我在render的done方法里修改代码如下就可以了。
//方法级渲染
tasktimer = table.render({
elem: '#tasktimer'
, cols: [[{field: 'name', title: sceneName, width: 120}
, {field: 'path', title: time, width: 124}
, {fixed: 'right', width: 100, align: 'center', toolbar: '#barDemo2'}
]]
, btns: ['now', 'confirm']
, height: 433
, data: sceneTaskLists
, limit: 9
, page: {
layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
, groups: 2 //只显示 1 个连续页码
, first: false //不显示首页
, last: false //不显示尾页
},
done: function (res, curr) {
if (curr > 1 && res.data.length === 0) {
tasktimer.reload({
data: sceneTaskLists,
page: {
curr: curr - 1
}
});
}
}
});
//删除
function sceneTaskRemove(id) {
for (let i = 0; i < sceneTaskLists.length; i++) {
if (id == sceneTaskLists[i].id) {
sceneTaskLists.splice(i, 1);
break;
}
}
if (tasktimer) {
tasktimer.reload({
"data": sceneTaskLists
});
}
}