600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > layui的table 列表数据删除 修改后关闭子页面 重新加载数据 停留在当前页面

layui的table 列表数据删除 修改后关闭子页面 重新加载数据 停留在当前页面

时间:2023-12-04 17:00:30

相关推荐

layui的table 列表数据删除 修改后关闭子页面 重新加载数据 停留在当前页面

写作原因

本人只是一个小白,在开发中接触到了这个需求,又因为也是初学layui,所以写了篇文章记录一下,方便自己以后查看

任务需求描述

项目使用layui的框架,列表数据通过table.render渲染

页面如下:

现在希望页面在点击删除后,或者点击修改进入子页面修改完成后,重新加载列表数据,并且页码依然停留在当前也,不会跳转到第一页。

解决思路

刚开始也上网查过很多方法,要不就是感觉太麻烦,要不就是搬过来没适配好,导致用不了

后来解决后发现挺简单的

列表的渲染代码如下:

table.render({elem: '', url: contextPath + '/', method: 'post', contentType: 'application/json', id: 'role', cols: [[{field: '', title: '', width: '18%', unresize: true,align: "center"}, {field: '', title: '', width: '18%',unresize: true,align: "center"}, {field: '', title: '', width: '8%',unresize: true,align: "center"}, {field: '', title: '', width: '8%', unresize: true,align: "center"}, {field: '', title: '', width: '15%', unresize: true,align: "center"},{field: '', title: '', width: '15%', unresize: true,align: "center"}, {fixed: '', title: '操作', toolbar: '#hiddenTools'}]], page: true, limit: 10 //默认十条数据一页, limits: [1, 5, 10, 20, 30, 50]//数据分页条, request: {pageName: 'page', //页码的参数名称,默认:pagelimitName: 'limit' //每页数据量的参数名,默认:limit}, where: reqJson,done: function (res, curr, count) {}});

table.render中的done配置项,其中方法的参数curr就是当前页码

然后设置一个全局变量currentPage,用来保存这个当前页码

在删除操作中,执行完删除部分的代码后 最后调用这行代码即可

table.reload('role',{page:{curr:currentPage}})

然后在修改操作中,点击修改打开子页面的部分代码如下:

function update() {var requestData = {};top.layer.open({type: 2,title: '',shadeClose: false,shade: 0.8,area: ['80%', '80%'],content: contextPath + "/",end: function(){// 从新加载表格table.reload('role',{page:{curr:currentPage}})}});}

// 其中 end 作用:层销毁后触发的回调:无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。

end: function(){

}

想了解更多的 layer.open 相关配置项的可以自行去搜索

然后在end配置项的方法中加上table.reload(‘role’,{page:{curr:currentPage}}),然后修改的子页面只需要关闭子页面就好,无需在子页面中再去刷新页面

这样就大功告成了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。