ExtJs--EditorGrid可编辑的表格控件

skyGAYD 2015-03-28

http://www.360doc.com/content/12/0531/14/8072791_214975686.shtml

可编辑表格控件:

------------------------------------------------------------------

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>无标题文档</title>

<linkrel="stylesheet"type="text/css"href="../../../resources/css/ext-all.css"/>

<scripttype="text/javascript"src="../../../adapter/ext/ext-base.js"></script>

<scripttype="text/javascript"src="../../../ext-all.js"></script>

<scripttype="text/javascript"src="../Adapter.js"></script>

<scripttype="text/javascript">

//可编辑表格控件EditorGrid

//制作一个可编辑表格

//添加一行

//删除一行

//保存修改结果

//验证editorGrid中的数据

//限制输入数据的类型

Ext.onReady(function(){

vardata=[

[1,1,newDate(),true],

[2,2,newDate(),false],

[3,2,newDate(),false],

[4,0,newDate(),true]

];

//选择列

varcomboData=[

['0','新版ext教程'],

['1','ext在线支持'],

['2','ext扩展']

];

varcomboStore=newExt.data.SimpleStore({

data:comboData,

fields:['value','text']

});

varcomboBox=newExt.form.ComboBox({

store:comboStore,

triggerAction:'all',

displayField:'text',

valueField:'value',

mode:'local',

//readOnly:true,

emptyText:'请选择'

});

//注意:每一列都多加了一个editor属性

//第一列:数字

//第二列:选择列

//第三列:时间列

//第四列:判断列

varcm=newExt.grid.ColumnModel([

{

header:'数字列',

dataIndex:'number',

editor:newExt.grid.GridEditor(newExt.form.NumberField({

allowBlank:false,

allowNegative:false,

maxValue:10

}))

},{

//如果comboBox无法正常显示,考虑是不是没有写渲染函数.当没写这个函数时,显示的数据时value值,而不是text.

//bijingEditorGrid里的编辑器在实际编辑时起作用,表格与editor之间共享的是数据,显示层都要依靠各自的实现.不过,这样做

//更灵活,不需要两者都使用一样的显示方式

header:'选择列',

dataIndex:'comboBox',

editor:newExt.grid.GridEditor(comboBox),

renderer:function(value){

returncomboData[value][1];

}

},{

header:'日期列',

dataIndex:'date',

editor:newExt.grid.GridEditor(newExt.form.DateField({

format:'Y-m-d',

minValue:'2007-12-14',

disabledDays:[0,6],

allowBlank:false,

disabledDaysText:'只能选择工作日...'

})),

renderer:function(value){

returnvalue.format('Y-m-d');

}

},{

header:'判断列',

dataIndex:'check',

editor:newExt.grid.GridEditor(newExt.form.Checkbox({

allowBlank:false

})),

renderer:function(value){//什么叫渲染,就是显示的时候,如何显示,这里面现实的时候,就是显示是和否

returnvalue?'是':'否';

}

}

]);

varstore=newExt.data.Store({

proxy:newExt.data.MemoryProxy(data),

reader:newExt.data.ArrayReader({},[

{name:'number'},

{name:'comboBox'},

{name:'date'},

{name:'check'}

]),

pruneModifiedRecords:true//如果为true,每次进行remove和load操作时,store会自动清除modified标记.可以避免出现下次提交时还会把上次那些modified信息都带上的现象

});

store.load();

//这里定义一个MyRecord类

varMyRecord=newExt.data.Record.create([

{name:'number',type:'string'},

{name:'comboBox',type:'string'},

{name:'date',type:'string'},

{name:'check',type:'string'}

]);

btn_add=function(){

//单击添加按钮,添加一个空行(首先新建一个MyRecord,记得给里面的属性赋值,否则EditorGrid最后显示的内容会混乱)

varp=newMyRecord({

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'){

varsm=grid.getSelectionModel();//获取表格的选择模型

varcell=sm.getSelectedCell();//从选择模型中获取选中的单元格,这个单元格有两个属性,一个是行号,一个是列号

varrecord=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中的原始数据不受影响.

varm=store.modified.slice(0);//获取store中修改过的数据,放到jsonArra数组中

varjsonArray=[];

<!--把这些数据组装成简单的数组.两种方发:第一种.因为数组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){

varobj=Ext.decode(response.responseText);

Ext.Msg.alert("成功",obj.msg);

},

failure:function(){

Ext.Msg.alert("失败","提交失败");

},

params:{

data:encodeURIComponent(Ext.encode(jsonArray))

}

});

}

//这里不是GridPanel,而是EditorGridPanel

vargrid=newExt.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>

<divid="grid"></div>

</body>

</html>

--------------------------------------------------------------------------

相关推荐

tinny / 0评论 2014-09-01
yongqiling / 0评论 2011-12-08