沃梦达 / 编程技术 / 前端开发 / 正文

Layui数据表格加入自定义扩展方法(重新渲染Render当前页数据)

沃梦达教程前端开发

2022-12-13

具体开发中遇到的问题如下，

数据表格的重新渲染或重新加载会导致当前操作的分页或配置被清空。我正在操作第5页，重新渲染后就回到了最原始第1页。

需要达到的效果是：

不调用接口，仅仅只是从table.cache["表ID"] 缓存里重新渲染，

步骤：
1.将需要修改的列和值使用table.cache["表ID"][“行索引”]["字段名"]=“xxxx”

2.调用自己写的扩展方法,将指定页重新渲染到界面。

Layui 官方提供的文档提供的刷新表格方法有几种

 var obj = table.render({});//生成一个数据表格

1.obj.Reload (这个方法会根据初始化表格的Option {} ,重新调用接口加载一次)

2.Table.Render(这个无效果)

代码如下：

YRRender: function(cache) {

                if (cache == undefined) {

                    console.error("cache参数为table.cache['表ID']");

                    return;

                }

                var s = {

                    data: cache

                };

                e.renderData(s, e.config.page.curr, e.config.page.limit, !0);

            }

将扩展方法代码加入到 lib\layui\lay\modules\table.js 里

加入后使用方法：

将table.cache["SampleList"] 里要改的数据进行修改后，

调用

obj.YRRender(table.cache["SampleList"]);//SampleList即 option 里 elem: '#SampleList' 属性

效果图：这里我用js修改了cache里的数据，然后调了YRRender方法。分页为改变，也未请求接口

沃梦达教程

本文标题为：Layui数据表格加入自定义扩展方法(重新渲染Render当前页数据)

上一篇： layui数据表格导入数据

下一篇：解决Layui数据表格中checkbox位置不居中

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX