当前位置：移动技术网 > IT编程>开发语言>JavaScript > Layui数据表格加入自定义扩展方法（一）(重新渲染Render当前页数据)

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

2020年07月14日 | 移动技术网IT编程 | 我要评论

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

数据表格内的内容通过 table.cache["SampleList"] 修改后，重新渲染或重新加载会导致当前操作的分页和配置被清空。我修改了第5页第X行的X列值，重新渲染后就回到了最原始第1页或重新调用了接口。

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

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

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

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

---------------------------------------------------- ---------------------------------------------------- ---------------------------------------------------- ----------------------------------------------------

需要达到的效果是：

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

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

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

这里需要修改原生js lib\layui\lay\modules\table.js，

将下面的扩展方法代码加入到 lib\layui\lay\modules\table.js 里，原生js是压缩了的，这里的demo 格式化了一下。

要加入的扩展方法代码如下：

不压缩：

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);
            }

压缩后：

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); }

调用方法：

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

调用

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

效果图：

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

本文地址：https://blog.csdn.net/wangdunyh2/article/details/107300199

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]
【剑指 Offer 45】把数组排成最小的数

输入一个非负整数数组，把数组里所有数字拼接起来排成一个数，打印能拼接出的所有数字中最小的一个。示例 1:输入: ... [阅读全文]

网友评论


验证码：

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

2020年07月14日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论

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