Ext可编辑grid
?
//创建recode结构 var recode =Ext.data.Record.create([ {name:"productProjectId",mapping:0}, {name:"productName",mapping:1}, {name:"searchBtn",mapping:2}, {name:"productNum",mapping:3}, {name:"accountMoney",mapping:4}, {name:"costMoney",mapping:5} ]); //创建data var data =[]; //创建reader var reader =new Ext.data.ArrayReader({},recode); //创建一个store返回规范的recode对象 var store =new Ext.data.Store( { proxy:new Ext.data.MemoryProxy(data), reader:reader, pruneModifiedRecords :true }); //加载数据 store.load();//定义表格编号var rowNumber = new Ext.grid.RowNumberer({sortable: true})//创建列var cm = new Ext.grid.ColumnModel([//rowNumber,{header: 'productProjectId',dataIndex: 'productProjectId',hidden: true,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))},{header:"商品/项目",dataIndex:"productName",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true,readOnly:true}))},{header:"操作",dataIndex: 'searchBtn',align: 'center',renderer:function(){return '<img src=\"'+ ctxPath +'/resource/image/systemIcon/47.png\" style=\"cursor:pointer;\" onclick=\"javascript:settleBtnExp();\" />';}},{header:"数量",dataIndex:"productNum",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true,maxLength:3}))},{header:"应收金额",dataIndex:"accountMoney",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true,readOnly:true}))},{header:"实收金额",dataIndex:"costMoney",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true}))}]); var tbar = new Ext.Toolbar({ items:[{ text: "添加一行", iconCls:"blist", handler:function(){ //定义一个recode对象 var initValue={productProjectId:"",productName:"",searchBtn:"",productNum:"",accountMoney:"",costMoney:""}; var p =new recode(initValue); //根据上面创建的recode 创建一个默认值grid.stopEditing();store.insert(0,p);//在第一个位置插入grid.startEditing(0,1);//指定的行/列,进行单元格内容的编辑p.dirty=true;p.modified=initValue;if(store.modified.indexOf(p)==-1){ store.modified.push(p); } } },"-",{ text:"删除", iconCls:"delCls", handler:function(){ var sm = grid.getSelectionModel(); var cell = sm.getSelectedCell();if (Ext.isEmpty(cell)) {Ext.Msg.alert('提示', '你没有选中行');return ;}var record = store.getAt(cell[0]);Ext.MessageBox.confirm('确认', '你确认要删除'+record.get('productName')+'这行吗?', function(btn){ if(btn=='yes'){ store.remove(record);} }); /* 此种方法用于带单选按钮的gridCheckboxSelectionModel var ds = grid.getStore();var selectedRow = grid.getSelectionModel().getSelected();if(selectedRow){Ext.MessageBox.confirm('确认', '你确认要删除这行吗?', function(btn){ if(btn=='yes'){ ds.remove(selectedRow);} }); }else{ Ext.Msg.alert("提示", "请选择一条需要删除的记录!"); }*/ } }] }); // 定义分页条 var bbar = getBarPaging(store, 'dtlBbarExt', false, function (){ //var keyId = Ext.getCmp("settleId").getValue(); store.reload({params : {start : 0,limit : bbar.pageSize//'memberSettleAccount.settleId': keyId}}); }); var grid = new Ext.grid.EditorGridPanel({columnWidth : 1,height: 200,store: store,cm: cm,id: 'listGridDtlExp',clicksToEdit : 1, // 单击、双击进入编辑状态autoScroll : true,stripeRows: true, // 斑马线loadMask: true,loadMask: {msg:'正在加载数据.....'},tbar: tbar,//bbar: bbar,frame: true})// 检查新增行的可编辑单元格数据合法性
var m = gridstore.modified.slice(0);for (var i = 0; i < m.length; i++) {var record = m[i];var rowIndex = store.indexOfId(record.id);var value = record.get(colName);if (Ext.isEmpty(value)) {// Ext.Msg.alert('提示', '数据校验不合法');return false;}var colIndex = cm.findColumnIndex(colName);var editor = cm.getCellEditor(colIndex).field;if (!editor.validateValue(value)) {// Ext.Msg.alert('提示', '数据校验不合法');return false;}}?