EditorGridPanel連接后臺數據庫做更新操作.對于EditGridPanel編輯修改數據后更新到數據庫的實現,通常有兩種策略: 1.一種是監聽EditorGridPanel的afteredit,每一次編輯表格后,都會觸發該事件,在事件處理函數中運用Ajax將修改的數據更新到數據庫; 2.建立單獨的保存處理函數,提供一個保存按鈕,所有編輯完成后,由用戶點擊觸發,一次性將所有編輯改動的數據更新到數據庫;
第一步：給EditorGridPanel添加afteredit事件處理代碼
?//給EditorGridPanel添加afteredit事件處理代碼
?gridPanel.on("afteredit",function(obj){
??
?});

?

第二步：分析obj參數
可以看出,afteredit事件處理函數只有一個參數,是一個對象(Object e),通過這個對象,我們可以得到: 1.grid,即剛才編輯的表格對象 2.record,剛才編輯的記錄 3.field,剛才編輯的是哪個字段 4.value,單元格中改動后的值 5.originalValue,單元格中改動前的值 6.row,剛才編輯的單元格在grid中的行索引位置 7.column,剛才編輯的單元格在grid中的列索引位置
?//給EditorGridPanel添加afteredit事件處理代碼
?gridPanel.on("afteredit",function(obj){
??alert(obj.record.get("id"));
??alert(obj.field);
??alert(obj.value);
??alert(obj.originalValue);
??alert(obj.row);
??alert(obj.column);
?});

?

第三步：發送異步請求。
//給EditorGridPanel添加afteredit事件處理代碼
?gridPanel.on("afteredit",function(obj){
??var id = obj.record.get("id");
??var field = obj.field;
??var value = obj.value;
??//發送異步請求
??Ext.Ajax.request({
???url:"updateUser.action",
???method:"post",
???params:{
????id:id,
????field:field,
????value:value
???},
???success:function(result){
????var jsonStr = Ext.util.JSON.decode(result.responseText)
????Ext.MessageBox.alert("成功",jsonStr.msg);
???},
???failure:function(result){
????var jsonStr = Ext.util.JSON.decode(result.responseText)
????Ext.MessageBox.alert("失敗",jsonStr.msg);
???}
??})
?});

?

第四步：Action操作

第五步：完成更新功能
1.修改成功后記錄進行提交
???success:function(result){
????var jsonStr = Ext.util.JSON.decode(result.responseText)
????Ext.MessageBox.alert("成功",jsonStr.msg);
????obj.record.commit();
???},

2.修改失敗后回滾
???failure:function(result){
????var jsonStr = Ext.util.JSON.decode(result.responseText)
????Ext.MessageBox.alert("失敗",jsonStr.msg);
????obj.record.reject();
???}

總結

以上是生活随笔為你收集整理的extjs表格编辑、EditorGridPanel的全部內容，希望文章能夠幫你解決所遇到的問題。

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