有時候我們會使用Extjs的EditorGridPanel組件來實現必要的功能，然而當我們修改可編輯單元格值之后，我們怎么獲取修改的數據呢？

例如：當需要修改EditorGridPanel組建中部分數據，并獲取修改內容提交保存。實現方法有兩種，一種是動態保存，一種是修改后批量保存。簡單說明如下：

動態獲取更新數據：
動態保存修改內容，可用監聽實現，可到底怎樣才能在單元格修改后觸發呢？這里做簡單說明。我們可以直接在EditorGridPanel組件對象中添加afteredit監聽（也有beforeedit監聽，若需要，也可使用），它的參數為當前修改，可在此監聽中獲取相應數據并通過ajax完成修改?？赏ㄟ^其參數獲取如下數據：
e.row;//修改過的行從0開始
e.column;//修改列索引
e.originalValue;//原始值
e.value;//當前值
e.grid;//當前修改的grid
e.field;//正在被編輯的字段名
e.record;//正在被編輯的行數據
用例代碼如下：

//... new Ext.grid.EditorGridPanel({clicksToEdit:1,forceValidation:true,frame : true,stripeRows:true,border:false,ds:ds,//配置數據源Storecm:cm,//配置列模型ColumnModelbbar:new Ext.PagingToolbar({pageSize:page,//頁面大小參數pagestore:ds,displayInfo: true,afterPageText: '/ {0}',beforePageText: '頁',firstText : "第一頁",prevText : "上一頁",nextText : "下一頁",lastText : "最后頁",refreshText : "刷新",displayMsg: '顯示第 <em>{0}</em> 條到 <em>{1}</em> 條記錄，一共 <em>{2}</em> 條',emptyMsg: "沒有記錄"}),loadMask:{msg:'數據加載中...'},listeners:{afteredit:function(e){//修改方法update(e.record.get("id"),e.field,e.value);}} }) //...


批量獲取更新數據：
批量獲取修改數據，可通過Ext.data.Store對象的getModifiedRecords()方法得到當前已修改的所有行數據的數組，可循環獲取其中所需數據，重新組裝成我們想要的數據，再作為ajaxc參數進行提交，實現操作。

//... var arr = [];//聲明空數組 var records = ds.getModifiedRecords(); Ext.each(records,function(record){//遍歷行數據數組arr.push(record.data); }); //...

總結

以上是生活随笔為你收集整理的Extjs中EditorGridPanel修改并获取数据的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。