extjs4mvc增删改查_asp.net下利用MVC模式实现Extjs表格增删改查
Ext.onReady(function() {var csm = new Ext.grid.CheckboxSelectionModel({//創(chuàng)建checkbox對(duì)象
handleMouseDown: newExt.emptyFn()
});var cum = newExt.grid.ColumnModel([
csm,//checkbox對(duì)象
{header: "用戶ID", dataIndex: "id", sortable: true},
{ header:'用戶姓名', dataIndex: 'name', sortable: true,
editor:newExt.grid.GridEditor(new Ext.form.TextField({ allowBlank: false}))
},
{ header:'性別', dataIndex: 'sex', sortable: true,
editor:newExt.grid.GridEditor(new Ext.form.TextField({ allowBlank: false}))
}
]);
;var store = newExt.data.Store({
proxy:new Ext.data.HttpProxy({ url: 'UserData.aspx'}),
reader:newExt.data.JsonReader({
totalProperty:'totalCount', //json字符串中的字段，數(shù)據(jù)量大小
root: 'data'//json字符串中的字段
}, [
{ name:'id'},
{ name:'name'},
{ name:'sex'}
]),
remoteSort:true});var Record =Ext.data.Record.create([
{ name:'id', type: 'string'},
{ name:'name', type: 'string'},
{ name:'sex', type: 'string'}
]);
store.load({ params: { start:0, limit: 5} }); //運(yùn)行加載表格數(shù)據(jù)
var cumgrid = newExt.grid.EditorGridPanel({
renderTo:'cumGrid',
store: store,
stripeRows:true, //斑馬線效果
viewConfig: {
forceFit:true,
columnsText:"顯示的列",
sortAscText:"升序",
sortDescText:"降序"},
height:200,
width:550,
sm: csm,
bbar:newExt.PagingToolbar({
pageSize:5, //每頁信息條數(shù)
store: store,
autowidth:true,
autoHeight:true,
displayInfo:true,
prevText:"上一頁",
nextText:"下一頁",
refreshText:"刷新",
lastText:"最后頁",
firstText:"第一頁",
beforePageText:"當(dāng)前頁",
afterPageText:"共{0}頁",
displayMsg:'顯示第{0}條到第{1}條記錄，一共{2}條',
emptyMsg:'沒有記錄'}),
tbar:new Ext.Toolbar(['-', {
text:'添加一行',
handler:function() {var win = newExt.Window({
title:'添加用戶',
layout:'fit',
height:300,
width:300,
border:0,
frame:true, //去除窗體的panel框架
plain: true,
html:''});
win.show();//顯示窗口
}
},'-', {
text:'刪除一行',
handler:function() {
Ext.Msg.confirm('信息', '確定要?jiǎng)h除？', function(btn) {if (btn = 'yes') {var id = "";functiongetid() {for (var i = 0; i < cumgrid.getSelectionModel().getSelections().length; i++) {
id+= cumgrid.getSelectionModel().getSelections()[i].get("id");
id+= ',';
}
};
getid();//初始化選中行id字符串?dāng)?shù)組
Ext.Ajax.request({
url:"DelUserInfo.aspx",
method:"post",
params: { id: id },
success:function(response) {
Ext.Msg.alert("恭喜", "刪除成功了!");
store.reload();
},
failure:function() {
Ext.Msg.alert("提 示", "刪除失敗了!");
}
})
}
});
}
},'-', {
text:'保存',
handler:function() {var m = store.getModifiedRecords().slice(0);var jsonArray =[];
Ext.each(m,function(item) {
jsonArray.push(item.data);
})if (false) {//判斷條件
return;
}else{//alert(Ext.encode(jsonArray))
Ext.Ajax.request({//url: "Demo/Operator.aspx",
url: "SaveUserInfo.aspx",
method:"POST",
params:'data=' +encodeURIComponent(Ext.encode(jsonArray)),
success:function(response, option) {
store.reload();
alert(response.responseText);
},
failure:function(response) {
store.reload();
alert(response.responseText)
Ext.Msg.alert("提示", "修改失敗了!");
}
});
}
}
},'-']),
cm: cum
});
cumgrid.render();//刷新表格
});
與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的extjs4mvc增删改查_asp.net下利用MVC模式实现Extjs表格增删改查的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大u盘低格工具怎么用 巨型U盘格式化必备
- 下一篇： C/Cpp / 设计模式 / 简单工厂模