愛(ài)華網(wǎng)------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</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
//制作一個(gè)可編輯表格
//添加一行
//刪除一行
//保存修改結(jié)果
//驗(yàn)證editorGrid中的數(shù)據(jù)
//限制輸入數(shù)據(jù)的類型
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擴(kuò)展']
];
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:'請(qǐng)選擇'
});
//注意:每一列都多加了一個(gè)editor屬性
//第一列:數(shù)字
//第二列:選擇列
//第三列:時(shí)間列
//第四列:判斷列
var cm=new Ext.grid.ColumnModel([
{
header:'數(shù)字列',
dataIndex:'number',
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank:false,
allowNegative:false,
maxValue:10
}))
},{
//如果comboBox無(wú)法正常顯示,考慮是不是沒(méi)有寫(xiě)渲染函數(shù).當(dāng)沒(méi)寫(xiě)這個(gè)函數(shù)時(shí),顯示的數(shù)據(jù)時(shí)value值,而不是text.
//bijing EditorGrid里的編輯器在實(shí)際編輯時(shí)起作用,表格與editor之間共享的是數(shù)據(jù),顯示層都要依靠各自的實(shí)現(xiàn).不過(guò),這樣做
//更靈活,不需要兩者都使用一樣的顯示方式
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){//什么叫渲染,就是顯示的時(shí)候,如何顯示,這里面現(xiàn)實(shí)的時(shí)候,就是顯示是和否
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,每次進(jìn)行remove和load操作時(shí),store會(huì)自動(dòng)清除modified標(biāo)記.可以避免出現(xiàn)下次提交時(shí)還會(huì)把上次那些modified信息都帶上的現(xiàn)象
});
store.load();
//這里定義一個(gè)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(){
//單擊添加按鈕,添加一個(gè)空行(首先新建一個(gè)MyRecord,記得給里面的屬性賦值,否則EditorGrid最后顯示的內(nèi)容會(huì)混亂)
var p=new MyRecord({
number:'',
comboBox:'',
date:'',
check:''
});
grid.stopEditing();//關(guān)閉表格的編輯狀態(tài)
store.insert(0,p);//把我們剛才創(chuàng)建的MyRecord放到表格的第一行
grid.startEditing(0,0);//激活第一行第一列的編輯狀態(tài)
}
btn_delete=function(){
Ext.Msg.confirm('提示','確定要?jiǎng)h除?',function(btn){
if(btn=='yes'){
var sm=grid.getSelectionModel();//獲取表格的選擇模型
var cell=sm.getSelectedCell();//從選擇模型中獲取選中的單元格,這個(gè)單元格有兩個(gè)屬性,一個(gè)是行號(hào),一個(gè)是列號(hào)
var record=store.getAt(cell[0]);//通過(guò)行號(hào)得到store這一行對(duì)應(yīng)的Record,然后移除即可
store.remove(record);
}
});
}
btn_save=function(){
//簡(jiǎn)單介紹slice(start,[end])方法,該方法返回一個(gè)新數(shù)組,包含了源函數(shù)從start到end所指定的元素,但不包括end元素.如果start為負(fù),
//則將它作為length+start處理,length為數(shù)組長(zhǎng)度,如果end為負(fù),則將它作end+length處理,如果end在start之前,不做任何復(fù)制.
//store.modified.slice(0)作用就是復(fù)制store.modified,保證store.modified中的原始數(shù)據(jù)不受影響.
var m=store.modified.slice(0);//獲取store中修改過(guò)的數(shù)據(jù),放到j(luò)sonArra數(shù)組中
var jsonArray=[];
<!--把這些數(shù)據(jù)組裝成簡(jiǎn)單的數(shù)組.兩種方發(fā):第一種.因?yàn)閿?shù)組m里保存的是Record,而不是簡(jiǎn)單的對(duì)象,只需要去除Record的data屬性即可,
//然后使用循環(huán)將data添加到數(shù)組中 第二種.使用each()函數(shù).each()的作用是遍歷array,并對(duì)每項(xiàng)分別調(diào)用fn函數(shù),如果array不是數(shù)組,
//則只執(zhí)行一次.如果某項(xiàng)調(diào)用fn后結(jié)果返回false,那么遍歷將結(jié)束并退出.
-->
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>
--------------------------------------------------------------------------
愛(ài)華網(wǎng)本文地址 » http://www.klfzs.com/a/25101011/54902.html
