[ExtJs]grid远端分页编辑

在使用gird分页时，一般有两种实现方式：

前端本地分页远端服务器分页 

当数据体量大时，肯定第二种方法优先，但是当使用了远端分页后，在进行编辑时，对于数据的保存就要特殊处理下了。

具体实现效果如下：

实现思路：

由于表格在进行切页时，数据会从服务端重新拉取，并重新渲染到前端store。

所以，在切页时需要将当前页改变的内容存储下来，保存到一个中介位置，等用户切回此页时，再把编辑的内容放入。

实现代码参考： 

1.首先在开启编辑时动态监听store的载入事件，并创建一个内存store 用于存储数据

startEdit() { const me = this, store = me.getStore(); me.memoryStore = new Ext.data.Store({proxy:{type:'memory'}});//借助内存用于保存编辑的数据 store.addListener('beforeload', 'beforeDataLoad', me);//监听数据载入之前的事件 store.addListener('load', 'afterDataLoad', me);//监听数据载入的事件 }

2.在数据载入前，将当前数据里的改动值存入到 内存store中

beforeDataLoad(store, opts) { //store对象.getUpdatedRecords()即可获取有变动的record对象 this.memoryStore.add(store.getUpdatedRecords()); }

ps:关于获取store里的变动值，有三种类型的获取：

getRejectRecords=>获取新增的数据  getUpdatedRecords=>获取变更的数据getRemovedRecords=>获取删除的数据 

上面的三类获取方法，都是基于数据保存在前端的，store还未接收真正change前

3.在新的页面渲染数据时，把之前存在内存store变量里的相关行数据重新塞入

afterDataLoad(store, records, success, opts) { const me = this; let memoryStore = me.memoryStore; //获取之前的更新的内容 records.forEach(rec=> { // 注意store要声明idProperty 指明主键字段是数据的哪个key!!! let oldRec = memoryStore.getById(rec.getId());//使用id获取 if(oldRec) rec.set(oldRec.data); }); }

4.最后在结束编辑时，将动态监听的事件移除，同时销毁内存store

cancelEdit() { const me = this, store = me.getStore(); store.removeListener('beforeload', 'beforeDataLoad', me);//移除相关监听的事件 store.removeListener('load', 'afterDataLoad', me); me.memoryStore.destroy(); store.rejectChanges();//使用拒绝结束改动恢复store的原有数据 }

一个完整Demo:表格分页编辑JS参考Demo