extjs表格编辑、EditorGridPanel
EditorGridPanel連接后臺(tái)數(shù)據(jù)庫做更新操作.對(duì)于EditGridPanel編輯修改數(shù)據(jù)后更新到數(shù)據(jù)庫的實(shí)現(xiàn),通常有兩種策略: 1.一種是監(jiān)聽EditorGridPanel的afteredit,每一次編輯表格后,都會(huì)觸發(fā)該事件,在事件處理函數(shù)中運(yùn)用Ajax將修改的數(shù)據(jù)更新到數(shù)據(jù)庫; 2.建立單獨(dú)的保存處理函數(shù),提供一個(gè)保存按鈕,所有編輯完成后,由用戶點(diǎn)擊觸發(fā),一次性將所有編輯改動(dòng)的數(shù)據(jù)更新到數(shù)據(jù)庫;
第一步:給EditorGridPanel添加afteredit事件處理代碼
?//給EditorGridPanel添加afteredit事件處理代碼
?gridPanel.on("afteredit",function(obj){
??
?});
?
第二步:分析obj參數(shù)
可以看出,afteredit事件處理函數(shù)只有一個(gè)參數(shù),是一個(gè)對(duì)象(Object e),通過這個(gè)對(duì)象,我們可以得到: 1.grid,即剛才編輯的表格對(duì)象 2.record,剛才編輯的記錄 3.field,剛才編輯的是哪個(gè)字段 4.value,單元格中改動(dòng)后的值 5.originalValue,單元格中改動(dòng)前的值 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);
?});
?
第三步:發(fā)送異步請(qǐng)求。
//給EditorGridPanel添加afteredit事件處理代碼
?gridPanel.on("afteredit",function(obj){
??var id = obj.record.get("id");
??var field = obj.field;
??var value = obj.value;
??//發(fā)送異步請(qǐng)求
??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.修改成功后記錄進(jìn)行提交
???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();
???}
總結(jié)
以上是生活随笔為你收集整理的extjs表格编辑、EditorGridPanel的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: TCP/IP基础知识--华为数通部门讲解
- 下一篇: web网站嵌入QQ临时会话代码 ----