|
可编辑表格控件： ------------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../../ext-all.js"></script> <script type="text/javascript" src="../Adapter.js"></script> <script type="text/javascript"> //可编辑表格控件EditorGrid //制作一个可编辑表格 //添加一行 //删除一行 //保存修改结果 //验证editorGrid中的数据 //限制输入数据的类型 Ext.onReady(function(){ var data=[ [1,1,new Date(),true], [2,2,new Date(),false], [3,2,new Date(),false], [4,0,new Date(),true] ]; //选择列 var comboData=[ ['0','新版ext教程'], ['1','ext在线支持'], ['2','ext扩展'] ]; var comboStore=new Ext.data.SimpleStore({ data:comboData, fields:['value','text'] }); var comboBox=new Ext.form.ComboBox({ store:comboStore, triggerAction:'all', displayField:'text', valueField:'value', mode:'local', //readOnly:true, emptyText:'请选择' }); //注意:每一列都多加了一个editor属性 //第一列:数字 //第二列:选择列 //第三列:时间列 //第四列:判断列 var cm=new Ext.grid.ColumnModel([ { header:'数字列', dataIndex:'number', editor:new Ext.grid.GridEditor(new Ext.form.NumberField({ allowBlank:false, allowNegative:false, maxValue:10 })) },{ //如果comboBox无法正常显示,考虑是不是没有写渲染函数.当没写这个函数时,显示的数据时value值,而不是text. //bijing EditorGrid里的编辑器在实际编辑时起作用,表格与editor之间共享的是数据,显示层都要依靠各自的实现.不过,这样做 //更灵活,不需要两者都使用一样的显示方式 header:'选择列', dataIndex:'comboBox', editor:new Ext.grid.GridEditor(comboBox), renderer:function(value){ return comboData[value][1]; } },{ header:'日期列', dataIndex:'date', editor:new Ext.grid.GridEditor(new Ext.form.DateField({ format:'Y-m-d', minValue:'2007-12-14', disabledDays:[0,6], allowBlank:false, disabledDaysText:'只能选择工作日...' })), renderer:function(value){ return value.format('Y-m-d'); } },{ header:'判断列', dataIndex:'check', editor:new Ext.grid.GridEditor(new Ext.form.Checkbox({ allowBlank:false })), renderer:function(value){//什么叫渲染,就是显示的时候,如何显示,这里面现实的时候,就是显示是和否 return value?'是':'否'; } } ]); var store=new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({},[ {name:'number'}, {name:'comboBox'}, {name:'date'}, {name:'check'} ]), pruneModifiedRecords:true//如果为true,每次进行remove和load操作时,store会自动清除modified标记.可以避免出现下次提交时还会把上次那些modified信息都带上的现象 }); store.load(); //这里定义一个MyRecord类 var MyRecord=new Ext.data.Record.create([ {name:'number',type:'string'}, {name:'comboBox',type:'string'}, {name:'date',type:'string'}, {name:'check',type:'string'} ]); btn_add=function(){ //单击添加按钮,添加一个空行(首先新建一个MyRecord,记得给里面的属性赋值,否则EditorGrid最后显示的内容会混乱) var p=new MyRecord({ number:'', comboBox:'', date:'', check:'' }); grid.stopEditing();//关闭表格的编辑状态 store.insert(0,p);//把我们刚才创建的MyRecord放到表格的第一行 grid.startEditing(0,0);//激活第一行第一列的编辑状态 } btn_delete=function(){ Ext.Msg.confirm('提示','确定要删除?',function(btn){ if(btn=='yes'){ var sm=grid.getSelectionModel();//获取表格的选择模型 var cell=sm.getSelectedCell();//从选择模型中获取选中的单元格,这个单元格有两个属性,一个是行号,一个是列号 var record=store.getAt(cell[0]);//通过行号得到store这一行对应的Record,然后移除即可 store.remove(record); } }); } btn_save=function(){ //简单介绍slice(start,[end])方法,该方法返回一个新数组,包含了源函数从start到end所指定的元素,但不包括end元素.如果start为负, //则将它作为length+start处理,length为数组长度,如果end为负,则将它作end+length处理,如果end在start之前,不做任何复制. //store.modified.slice(0)作用就是复制store.modified,保证store.modified中的原始数据不受影响. var m=store.modified.slice(0);//获取store中修改过的数据,放到jsonArra数组中 var jsonArray=[]; <!--把这些数据组装成简单的数组.两种方发:第一种.因为数组m里保存的是Record,而不是简单的对象,只需要去除Record的data属性即可, //然后使用循环将data添加到数组中 第二种.使用each()函数.each()的作用是遍历array,并对每项分别调用fn函数,如果array不是数组, //则只执行一次.如果某项调用fn后结果返回false,那么遍历将结束并退出. --> Ext.each(m,function(item){ jsonArray.push(item.data); }) Ext.Ajax.request({ url:'../success.jsp', success:function(response,opt){ var obj= Ext.decode(response.responseText); Ext.Msg.alert("成功", obj.msg); }, failure:function(){ Ext.Msg.alert("失败","提交失败"); }, params:{ data:encodeURIComponent(Ext.encode(jsonArray)) } }); } //这里不是GridPanel,而是EditorGridPanel var grid=new Ext.grid.EditorGridPanel({ cm:cm, store:store, autoHeight:true, renderTo:'grid', tbar:[{ xtype:'buttongroup', defaults:{ scale:'small' }, layoutConfig:{ columns:5 }, items:[ { xtype:'button', text:'添加一行', handler:btn_add },{ xtype:'button', text:'删除一行', handler:btn_delete } ,{ xtype:'button', text:'保存', handler:btn_save } ] } ] }); }); </script> </head> <body> <div id="grid"></div> </body> </html> --------------------------------------------------------------------------     |
|
|
