本文介绍了如何处理表单数据更改。 可以作为参考，需要的人请参考。 希望能帮上忙。
表数据的修改通常包括添加、修改、删除、移动等几个内容。 开发中经常遇到的一个问题是更改后如何将数据同步到节点。 迄今为止的个人建议是利用重新加载表。 无论是url模式还是data模式，实际上都需要重新加载，重新加载url将在后台获取最新数据。 data模式通常是data操作，然后返回到新的data模式
同时，考虑如何将请求降至最低。 恐怕感受最深的是update操作。 如果您重载了整个表单来更新此记录，并且觉得一旦请求了数据就无法成功，则通常可以通过表单的tool事件中的obj.update方法进行更新。
但是，具体使用后，我们看到了很多不足之处。 本文主要针对这些不足之处进行了一个处理并给出了tablePlug.update的方法，然后派生了add、remove和move，同时增加了更新统计行数据的方法。
一.更新
如上所述，obj.update(data )有很多限制。 其优点是，以最低的修正成本实现了数据的更新。 他会更新参数中data密钥的数据，而不会在table的整个节点上更新整行。 缺陷在底层实现逻辑上有点问题：
1、通过遍历数据，更新缓存cache中对应记录的密钥值，基于cols的配置信息更新td的内容。 但是，要更新toolbar列就没辙了，因为现在分析的只有templet，所以要更新toolbar的话基本上只能设定为templet，在这个列上追加一个
2、toolbar列即使添加field改为templet也不一定能更新。 内部实现逻辑首先确定原始data中是否存在此key，因此如果原始data中不存在field命名，则以后无法使用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中通常可能会有多个字段。工具栏中的按钮也取决于数据的状态，例如是否显示某些按钮。
所以我个人来说，更新这个数据不是更新独立的小单元，不是遍历更新的key一个一个地更新，而是先用update这个行更新update这个行的数据，再看更大的话，实际上的这个测试
你更改这张唱片的其他唱片不能说一定是不变的。 不排除某个字段的td，他如何根据当前页面的同一字段来处理统计行等现实？ 因此，当前的想法是将直接值更新到cache，然后调用table内部渲染tr td的内容。
粗略代码：
前面对参数进行了一些处理，使参数更加灵活。 最重要的是更新后半部分cache的部分和最重要的renderData方法：
他的作用是重新分析和渲染cache中的数据，并处理是否移动数据，以及缺省情况下是否单击该记录，但核心渲染cache，并在table.js中创建renderData
使用场景：
1、知道现在的编辑正在修改那个记录，可以看到最常用的场景。 一个是点击编辑弹出form，然后修改后提交。 完成后，我希望尽量不要再次请求接口的data和页面的更新。
gif很难录音，用自己测试的例子中的编辑按钮测试效果就可以了
的更新数据以tablePlug.update (表实例的id、当前tr的索引、newData )的形式调用
2、在不知道当前的trIndex的情况下，为了更新某个记录，必须是具有主键的表，并且具有在被更新的数据中必须包含主键的字段的限制。 否则，直到更新的最后都不知道
是哪条记录。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模式怎么跟流加载配合使用，弄成一个流加载的表格
三、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);
更多web前端开发知识，请查阅 HTML中文网 ！！