layui表格更改一列数据_【WEB前端开辟】layui表格数据变动的一种处理方式

表格数据更改，平常包括几个内容：新增、修正、删除、挪动，开辟中常常会面对的一个题目就是更改以后怎样将数据同步到节点上，一向以来个人的提议照样应用表格重载，不管是url情势的照样data情势的实际都是须要重载，url重载自然会从新请求背景获得最新的数据，data情势平常就是对data的操纵，以后从新以新的data去衬着出来。

同时会斟酌的是怎样只管削减请求，可以以为最深的就是update操纵，为了要更新这一条纪录而重载全部表格，请求一遍数据以为划不来，那末平常来讲就可以应用表格的tool事宜中的obj.update这个要领去更新。

不过细致运用中就会发明其诸多的不足的处所，本文就是主要针对这些不足举行一个处置惩罚给出一个tablePlug.update的要领，然后进而衍生出add和remove和move，同时新增了更新统计行数据的要领。

测试页面： 综合测试页面 流加载表格测试页面 定时革新表格测试页面

一、update

正如上面说的obj.update(data)有诸多限制，长处上来讲就是用最小的修正价值，完成了数据的更新，他就更新参数中的data中的键的数据，不会全部行更不会全部table的节点更新；缺点是底层的完成逻辑有点题目：

1、是经由过程遍历data，更新缓存cache中对应的纪录的key的value，然后依据cols的设置信息更新td的内容，然则假如是想要更新toolbar列的话就没戏，现在剖析的只需templet的，所以假如想要更新toolbar的话基础就只能设置成templet，而且要给这个列增加一个field,才有理论上的可以。

2、toolbar列纵然加了field改成templet也未必能更新过来，由于内部的完成逻辑是先推断原始的data是不是有这个key，所以假如field定名是原始的data内里没有的，背面用obj.update也更新不进去的，这个是一个比较大的限制。

由于拿我们项目来讲，背景给我们的数据假如原始的纪录内里没有这个key的值他不会给一个key: ”的，那末背面要想应用obj.update这个key就变得不可以，除非应用parseData在衬着之前对背景给的数据做一个人工的初始化把对应的key增加上，然则可想而知有多贫苦。

3、数据他是一个一个更新进去，然后更新一个值就更新对应的td，然则这个就存在别的一个风险了，就是遍历对象他是无序的，比方update{a: 1, b:2}，假如a字段的cols中会用到b字段的值做一个处置惩罚再显现出来。

那末假如遍历递次是先更新a的值，然后就最先更新a的td的内容，这个时刻cache中b的值照样旧的不是你要更新进去的2,比及更新了b字段了他又不能说检测到其他字段有运用了这个字段会去再次更新对方的内容，这就致使了a出来的结果照样错的。

4、更新了统计列的某一个值统计行的对应数据没有从新盘算。

总结的来讲就是，obj.update完成的照样太甚理想化太甚简朴，一条纪录从数据上来讲每一个key是自力的这个没什么题目，然则到页面显现就不然了，由于页面的内容它不一向是单个字段的简朴值显现，还会举行一些特别处置惩罚。

所以须要一个templet来转化，来自定义，所以有可以一个td内里会用到多个字段这个很正常，东西列的按钮也会依据数据的状况去决议部份按钮是不是显现等等。

所以个人认为要更新这个数据不能是一个自力的小单位的更新，而是先update这一行的数据然后在update这一行，而不是遍历被update的key一个个更新，再往大了看，实际这个表的纪录也是一个团体。

也是不能说你改了这条纪录其他的纪录必定是稳定的，不消除某个字段的td他会依据当前页面的同一个field做了什么处置惩罚实际，比方统计行，所以现在的思绪就是直接将值先update到cache中，然后再挪用table内部的衬着tr td的内容。

大抵的代码：

前面是针对参数做了一些处置惩罚让参数越发天真，最症结的是后半部份的更新cache的部份，还要一个最症结的renderData的要领:

他的作用就是将cache中的数据从新剖析衬着一遍，同时针对是不是是挪动数据另有默许点击那一条纪录的处置惩罚，然则中心是衬着cache，挪用table.js内部的renderData。

运用场景：

1、晓得当前编辑修正的是那一条纪录，可以看看一个最常常使用的场景就是点击编辑弹出一个form然后修正提交，完成以后愿望只管不要从新请求接口更新到data和页面中去，

gif很不好录，本身运用测试的例子内里的编辑按钮测试结果即可

挪用的更新数据的情势是：

tablePlug.update(表格实例的id, 当前tr的index, newData)

2、不晓得当前的trIndex的情况下update某一条纪录的话，必需有一个限制就是必需是有主键的表格，而且更新的数据中必需包括主键的字段，不然你也不晓得更新的究竟是哪条纪录。

tablePlug.update('demo', {id: 10002, username: '贤心'});

3、一次性更新多条纪录，这个参数trIndex就没有意义了，加了也没用，由于是更新多条纪录，所以可以这么写

tablePlug.update('demo', [{id: 10002, username: '贤心'}, {id: 10006, username: '小偷'， age: 18, sign: '大叔'}]);

这个测试页面可以看看头部toolbar中的“积分清零”另有“女性积分加100”这两个测试按钮以及背地的事宜实行的要领

4、越发率性的，只需传入一个tableId，update会将当前根据cache中的数据给衬着一次，这个是异常有用的，比方假如你以为我update中的逻辑针参数对cache的修正的逻辑不满意可以本身用本身以为更好的要领去处置惩罚cache，末了实行一下tablePlug.update(‘demo’)就好了，供应更高的自在度，和拓展的可以性。

二、addData

addData增加的纪录是已请求接口完成返回的数据纪录，本质上来讲就是不一样的，所以不要殽杂。

细致addData的代码：

data情势的话，实际也是往data内里增加一些纪录，然后也是再reload一下。

// 增加单条纪录：

tablePlug.addData ('demo', {id: newId, username: '甲'});

// 增加多条纪录

tablePlug.addData ('demo', [{id: newId1, username: '乙'},{id: newId2, username: '丙'}]);

关于addData的有一个比较综合的例子可以看看应用table的data情势怎样跟流加载合营运用，弄成一个流加载的表格

https://sun_zoro.gitee.io/layuitableplug/testTableFlow

三、del

新增和删除实际个人提议照样reload比较稳妥，不管是url照样data情势都是，所以删除对应的处置惩罚方式也跟新增实际差不多，只不过删除贫苦一点的就是data情势要在原始的纪录内里去删除指定的纪录。

而且有可以开启了复选的状况影象删除了就要将关于他的状况给调解一下；照样为了运用更轻易，参数一样做了处置惩罚，

1、删除指定的下标的数据，可以检察表格行的toolbar中的删除按钮的监听处置惩罚，然则注重，假如表格是url的情势，现在测试页面写的都是json文件，所以reload也不会有结果的。

所以要测试请在data情势的测试，不必纠结这个，url的假如是实际的效劳接口的话是背景返回数据，平常删除胜利了背面查询是不会再出来的，除非背景接口有题目。

2，删除指定的一些纪录，这个平常有两种情势，然则请求一样就是必需是有主键的表格

// id鸠合

tablePlug.del('demo', [1,2,3,4]);

// 对象数组

tablePlug.del('demo', [{id: 1, name: 'name1'}, {id:2}, {id:4}]);

依据获得哪一种数据比较轻易就用哪一种情势，可以参考测试页面的批量删除的处置惩罚方式

四、move

这个处置惩罚基础跟update差不多，将数据在cache中调解位置，然后挪用一下组件内部的renderData的要领让他从新衬着出来就好

然后为了运用轻易衍生出来一个上移跟下移的要领

结果

理论上应用一些拖拽事宜或许其他的插件在事宜中挪用一下tablePlug.move(‘demo’, form, to);就可以完成递次的恣意转变了

限制：注重！这个只是针对数据挪动，不会有单条数据纪录的更改，假如原始的数据内里有点击了排序，那末挪动以后默许是会去掉这个排序的状况了的，由于挪动以后极可以就不能满足当前的排序划定规矩了，所以提议在运用挪动的时刻不要跟sort搭配，假如有sort而且所谓的挪动是会提议请求转变数据的，那末这个提议照样运用请求接口获得两个新的数据然后用update去更新他们的位置。

五、renderTotal

在纪录更新以后，假如存在统计行有须要统计的列，那末值平常也要随着变，别的一个越发主要的作用就是可以自定义统计划定规矩，而不是自带的乞降，可以自定肯定盘算的函数，或许可以直接相似templet一样的去自定义返回的内容，包括异步的去读取想要显现的数据。

代码也许以下：

从完成代码可以看出就是给cols的字段设置新增一个totalFormat的设置，可以设置一个划定规矩假如不设置的话就是sum(现在也只是增加了sum，其他的划定规矩背面会到场或许本身到场，比方均匀。

最大最小不过个人以为主要意义是可以自定义要领，这个才是有用常常使用的)，也可以设置一个要领，假如不是异步的可以直接把结果返回，假如是须要异步的那末也可以在获得终究想要的结果的时刻实行：

tablePlug.renderTotal(tableId, field, res);

比方下面的：

日常平凡有用的话不是都要本身去挪用的，在插件内部已在renderDone回调内里会去实行他了:

参数也是比较自在，差别的组合会有差别的结果，

// 触发更新某个表格的一切列的统计数据

renderTotal(tableId);

// 触发更新某个表格的某个字段的数据

renderTotal(tableId, fieldName);

// 更新某个表格的某个字段的统计数据为value

renderTotal(tableId, fieldName, totalValue);

六、refresh

之前做过一个智能reload的修正，即在实行table.reload的时刻会依据传过去的option来推断只是从新请求数据照样须要重载一下，个人以为结果可以了。

不过关于有强迫症(有寻求)的小伙伴来讲，在一些场景下照样不够好，就是那些定时革新的，表现就是一方面滚动条会回到top:0,left:0，另有其他的比方鼠标在操纵分页组件的时刻会以为落空核心，新增一个tablePlug.refresh来试一试可否满足请求。

先看结果：

事宜背地做的事变：

表格config：

背地的完成思绪

修正table的Class.prototype.pullData支撑refresh情势

renderData的时刻依据是不是refresh去做一些细节的处置惩罚，另有一个限制就是返回的数据中关于总数应该是稳定的，假如发生了转变，那末照样会renderData，会从新衬着page组件。

别的一个限制就是这类refresh的表格不提议再加什么按钮呀edit呀，由于它一向会在变，基础主要就是用来做一个纯真用来显现用的表格，比方一些常常变化的数据，接见人次，股票动态之类的。

运用：

// 启动表格demo的自动革新功用，500毫秒一次

tablePlug.refresh('demo', 500);

// 作废表格demo的自动革新

tablePlug.refresh('demo', false);

// 住手一切已开启自动革新的表格的自动革新

tablePlug.refresh(false);

更多layui框架学问请关注layui运用教程。

以上就是layui表格数据更改的一种处置惩罚方式的细致内容，更多请关注ki4网别的相干文章！