extjs-EditorGridPanel学习
this.grid.getStore().getModifiedRecords();
this.grid.getStore().commitChanges();
- HTML>
- <HEAD>
- <TITLE>可编辑表格面板EditorGridPanel</TITLE>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <link rel="stylesheet" type="text/css" href="extjs2.0/resources/css/ext-all.css" mce_href="extjs2.0/resources/css/ext-all.css" />
- <mce:script type="text/javascript" src="extjs2.0/adapter/ext/ext-base.js" mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>
- <mce:script type="text/javascript" src="extjs2.0/ext-all.js" mce_src="extjs2.0/ext-all.js"></mce:script>
- <mce:script type="text/javascript" src="extjs2.0/source/locale/ext-lang-zh_CN.js" mce_src="extjs2.0/source/locale/ext-lang-zh_CN.js"></mce:script>
- <mce:script type="text/javascript"><!--
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
- Ext.QuickTips.init();
- Ext.form.Field.prototype.msgTarget = 'qtip';
- //创建表格数据
- var data = [
- [1,'张三','男',new Date(1979,09,13),29,'zhang@abc.com'],
- [2,'李四','女',new Date(1978,10,01),30,'li@abc.com'],
- [3,'王五','男',new Date(1981,01,01),27,'wang@abc.com']
- ];
- //创建记录类型Person,mapping值为字段值对应数组中数据的索引位置
- var Person = Ext.data.Record.create([
- {name: 'personId',mapping: 0},
- {name: 'personName',mapping: 1},
- {name: 'personSex',mapping: 2},
- {name: 'personBirthday',mapping: 3},
- {name: 'personAge',mapping: 4},
- {name: 'personEmail',mapping: 5}
- ]);
- var dataStore=new Ext.data.Store({//配置数据集
- reader: new Ext.data.ArrayReader({id:0},Person),
- data: data
- });
- //创建Grid表格组件
- var grid = new Ext.grid.EditorGridPanel({
- title : 'Ext.grid.EditorGridPanel',
- applyTo : 'grid-div',
- width:430,
- height:280,
- frame:true,
- clicksToEdit:2,
- store: dataStore,
- //方式一:对所有修改结果集中式提交
- tbar:[{
- text:'提交修改',
- handler:function(){
- var mr=dataStore.getModifiedRecords();//获取所有更新过的记录
- var recordCount=dataStore.getCount();//获取数据集中记录的数量
- if(mr.length==0){ // 确认修改记录数量
- alert("没有修改数据!");
- return false;
- }
- var recordModStr="[";//这里以josn方式保存
- for(var i=0;i<mr.length;i++){
- alert("orginValue:"mr[i].modified["personEmail"]+",value:"+mr[i].data["personSex"]);//此处cell是否发生
- //更改可用mr[i].dirty来判断
- recordModStr+="{personName:"+mr[i].data["personName"]+",personSex:"+mr[i].data["personSex"]+",personBirthday:"
- +mr[i].data["personBirthday"]+",personAge:"+mr[i].data["personAge"]+",personEmail:"+mr[i].data["personEmail"]+"}";
- if(i<mr.length-1)
- recordModStr+=",";
- }
- recordModStr+="]";
- alert(recordModStr);
- //向后台提交请求 Ext.Ajax.request(requestCofig);//将recordModStr传入
- }
- }],
- columns: [//配置表格列
- {header: "id", width: 40, dataIndex: 'personId'},
- {header: "姓名", width: 70, dataIndex: 'personName',
- editor:new Ext.form.TextField({
- allowBlank : false
- })
- },
- {header: "性别", width: 40, dataIndex: 'personSex',
- editor:new Ext.form.ComboBox({
- editable : false,
- displayField:'sex',
- mode: 'local',
- triggerAction: 'all',
- store:new Ext.data.SimpleStore({
- fields: ['sex'],
- data : [['男'],['女']]
- })
- })
- },
- {header: "生日", width: 100, dataIndex: 'personBirthday',
- editor:new Ext.form.DateField(),
- renderer:Ext.util.Format.dateRenderer('Y年m月d日')
- },
- {header: "年龄", width: 40, dataIndex: 'personAge',
- editor:new Ext.form.NumberField(),renderer:isEdit
- },
- {header: "电子邮件", width: 120, dataIndex: 'personEmail',
- editor:new Ext.form.TextField({
- vtype:'email'
- })
- }
- ]
- })
- //方式二:对修改结果实时提交,这里对年龄实时提交
- function isEdit(value,record){
- //向后台提交请求
- return value;
- }
- function afterEdit(obj){ //每次更改后,触发一次该事件
- alert("orginalValue:"+obj.originalValue+",value:"+obj.value);
- }
- grid.on("afteredit", afterEdit, grid);
- });
- // --></mce:script>
- </HEAD>
- <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">
- <div id='grid-div'></div>
- </BODY>
- </HTML>
listeners:{
afterEdit: function(e){
if(e.value && e.originalValue !== e.value){
Ext.Ajax.request({
url: 'jsp/insurance/ins_prove_bl/dispose/updateDate.jsp',
success: function(response, opts){
var resObj = Ext.decode(response.responseText);
if(resObj.success){
Ext.example.msg('系统提示','操作已完成');
e.record.commit();
} else {
Ext.MessageBox.error("错误","服务器未正确响应。请稍候重试或与管理员联系。");
}
},
failure: function(response, opts){
Ext.MessageBox.error("错误","无法提交请求,请检查网络连接");
},
params: {
ipId:recordId,
ipdId: e.record.get('id'),
updateField: e.field, //列名
updateValue: e.value ? Ext.util.Format.date(new Date(e.value),'Y-m-d') : '' //值
}
});
}
}
}
红色的两行是关键代码,updateField是你要修改的列名,updateValue是你修改之后的值,这是因为你页面上可能有多个可编辑项,这样动态的取是很科学滴
后台取值代码:
String updateField = request.getParameter("updateField");
String updateValue = request.getParameter("updateValue");
updateField 就是你要修改的数据库的列名,updateValue 就是值
if(updateField != null && updateValue!=null){
updateString += " a."+updateField+" = '"+updateValue+"' ";
}