layui table.reload 数据重载遇到的问题

layui官方提供重载的代码是这样的：

var $ = layui.$, active = {reload: function(){var demoReload = $('#demoReload');//执行重载table.reload('testReload', {page: {curr: 1 //重新从第 1 页开始},where: {key: {id: demoReload.val()}}});}};$('.demoTable .layui-btn').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});

把代码复制到本地进行测试：

layui.use('table', function(){var table = layui.table;table.render({elem: '#role',url:'/oaManageSystem/manager/getAllRoleInformation',toolbar: '#operate' //开启头部工具栏，并为其绑定左侧模板,even: true,id: 'roleList',cols: [[    {checkbox: true, fixed: true, width:'5%'},{field:'id', width:'5%', title: 'ID',sort: true},{field:'role_id', title: '角色ID',width:'15%'},{field:'role_name', title: '角色名',width:'15%'},{field:'role_creatTime',  title: '创建时间',width:'20%'},{field:'role_state', width:'10%',title: '状态'},{title:'状态',width:'10%', align:'center',  toolbar: '#test-table-toolbar-state'},{title:'操作',width:'20%', align:'center', fixed: 'right', toolbar: '#test-table-toolbar-operate'}]]});var $ = layui.$, active = {reload: function(){var id = $('#id');//执行重载,会进入 table.render 的 url,并且会把 where 中参数传过去table.reload('roleList', {page: {curr: 1 //重新从第 1 页开始},where: {key: {id: id.val()}}});}};$('#search').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});

结果发现是无效的。

但是可以看到有执行table.reload,并且有参数传递；而且在执行完之后又执行了另一个方法 manager/roleManage?start=&end=&id=10000,再往下看：

可以看到最后又执行了一次获取数据的方法，但这次并没有传递参数，所以返回所有数据是OK的，只是想要的重载没有实现。

问题解决：去网上看了很多关于layu table.reload 的文章，并且试了试都没有效果，最后按照常规的类似ajax异步刷新的方式解决的。代码如下：

html :

js:

layui.use('table', function () {var table = layui.table;table.render({elem: '#role', url: '/oaManageSystem/manager/getAllRoleInformation', toolbar: '#operate' //开启头部工具栏，并为其绑定左侧模板, even: true, cols: [[{checkbox: true, fixed: true, width: '5%'}, {field: 'id', width: '5%', title: 'ID', sort: true}, {field: 'role_id', title: '角色ID', width: '15%'}, {field: 'role_name', title: '角色名', width: '15%'}, {field: 'role_creatTime', title: '创建时间', width: '20%'}, {field: 'role_state', width: '10%', title: '状态'}, {title: '状态', width: '10%', align: 'center', toolbar: '#test-table-toolbar-state'}, {title: '操作',width: '20%',align: 'center',fixed: 'right',toolbar: '#test-table-toolbar-operate'}]]});var $ = layui.$, active = {reload: function () {var id = $('#id').val();//执行重载,会进入 table.render 的 url,并且会把 where 中参数传过去table.reload('role', {where: {id: id}});}};$('#search').on('click', function () {var type = $(this).data('type');active[type] ? active[type].call(this) : '';});

后台：

    @RequestMapping("/getAllRoleInformation")@ResponseBodypublic JSONObject getAllRoleInformation() throws UnsupportedEncodingException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String id = request.getParameter("id");if(id==null||id.length()<=0){return roleService.getAllRoles();}return roleService.getAllRolesById(id);}

结果展示：

可以看到最后执行的方法是带有参数的，table.reload 重载成功。

希望对各位有用。

注意：别忘了在html button标签中加上 type 属性，个人感觉跟这个关系很大。

layui table.reload 数据重载遇到的问题相关推荐

layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
layui table reload post请求_如何实现在Layui框架中完成父窗口刷新（更新）
最近有个项目使用Layui框架进行后端系统的界面搭建,其中Layui框架中的Layer组件在项目中会用得非常多.且有些功能会遇到子窗口完成数据的提交后,进行关闭同时会刷新父窗口的数据,所以此文章分享一 ...
layui数据表格，操作当前行，数据重载（刷新表格数据）
最近项目中使用到layui前段框架,在修改完当前行的数据,并同步到数据库后,页面展示的还是旧数据虽然刷新页面可以解决问题,但这小问题还是让人不爽,人类总是懒惰的,绝不自己点刷新(狗头) 清空学生信息 ...
layui的layui.table.cache只能获取当前页的所有数据问题解决(layui实现添加行操作遇到分页)
今天在使用layui数据表格的时候,我想实现一个添加行的操作,但是要添加行就得先获得当前所有的数据,如果不分页的话layui.table.cache['test'];还可以获取所有的数据, 但是如果数 ...
layui表单数据重载全局搜索
场景描述:点击下图中的搜索按钮,会异步更新表单数据,不会使得整个页面刷新. 实现代码如下,重载方法中的where是新增的参数,就是你原来加载数据列表的参数(如url.method等)也会附带上,不过新 ...
解决layui的table数据重载reload where参数会保留上次条件的问题
解决layui的table数据重载reload where参数会保留上次条件的问题原 table.render({......... });// 监听搜索操作 form.on('submit(dat ...
Layui table数据重载实现
类似局部刷新数据,常用与搜索框的使用,刷新查找的数据官方文档参考运行效果参考: 数据表格的重载 HTML <div class="form-box"><div ...
解决layui使用定时器对table数据重载导致页面闪烁的问题
最近使用layui做前端,使用了table,由于需要添加定时器刷新table,导致页面闪烁,令人生不如死.然后就拼命的百度找解决方法,终于找到了组织. LAYUI用TABLE.RENDER加载数据用 ...
layui表格数据重载（根据条件查询，监听按钮事件）
html代码 <div class="wrap-container clearfix"><div class="column-content-detai ...

layui table.reload 数据重载遇到的问题

layui table.reload 数据重载遇到的问题相关推荐

最新文章

热门文章