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

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

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

//... new Ext.grid.EditorGridPanel({clicksToEdit:1,forceValidation:true,frame : true,stripeRows:true,border:false,ds:ds,//配置數(shù)據(jù)源Storecm:cm,//配置列模型ColumnModelbbar:new Ext.PagingToolbar({pageSize:page,//頁面大小參數(shù)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:'數(shù)據(jù)加載中...'},listeners:{afteredit:function(e){//修改方法update(e.record.get("id"),e.field,e.value);}} }) //...


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

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

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。