Grid用法之添加删除
通过后台获取分页数据
var store=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'09_02_01.jsp'}), //直接通过Http访问数据
reader:new Ext.data.JosnReader({
totleProperty:'totleProperty', //对应JSP代码中返回的totalProperty,就是数据的总数
root:'root' //root对应的JSP代码中的返回的root，也就是一个包含返回数据的数组
},[
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
store.load({params:{start:0,limit:10}});// 初始化时通过传参数去获得希望得到的那部分数据，start试试从第几条数据开始显示，limit指从start开始一共几条数据。
可编辑表格控件-----EditorGrid
var cm=new Ext.grid.ColumnModel([{
header:'编号',
dataIndex:'id',
editor:new Ext.grid.GridEditor( //每列添加一个editor属性，里边的属性都是完全一样的TextField
new Ext.form.TextField({ //TxetField的方式是随意修改单元格
allowBlank:false //表示不允许输入空值
})
clicksToEdit:1 // 要编辑单元格时点击的次数，默认是双击
添加和删除行：
(表示出现在表的顶部新建一行工具条)
tbar:new Ext.Toolbar(['-',{
text:'添加一行',
handler:function(){ //handler定义按钮被按下时执行的内容
var p=new Record({
id:'',
name:'',
descn:''
});
grid.stopEditing();
store.insert(0,p); //新建一行
grid.startEditing(0,0); //激活第一行第一列的编辑状态，及新建后焦点默认选在上面
}},'-',{
text:'删除一行',
handler:function(){
Ext.Msg.confirm('信息','确认删除？',function(btn){
if(btn=='yes'){
var sm=grid.getSelsctionModel();
var cell=sm.getSelectedCell();
var record=store.getAt(cell[0]);
store.remove(record); //删除一行
}
})；
} },'-'])
});
保存数据:
{
text: '保存',
handler: function(){
var m = store.modified.slice(0);//作用是复制store.modified。保证其原始数据不受影响
var jsonArray = [];
Ext.each(m, function(item) {//作用是遍历m，并对每项分别调用fn函数
jsonArray.push(item.data);
});
Ext.lib.Ajax.request(
'POST',
'11_03_01.jsp',
{success: function(response){
Ext.Msg.alert('信息', response.responseText, function(){
store.reload();
}); //success是请求成功后返回的信息
},failure: function(){
Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
}}, //failere是请求失败后返回的信息
'data=' + encodeURIComponent(Ext.encode(jsonArray))
);
}
验证数据:
var m = store.modified.slice(0);
for (var i = 0; i < m.length; i++) {
var record = m[i];//获得被修改的每行数据
var fields = record.fields.keys;//表示一共几行
for (var j = 0; j < fields.length; j++) {
var name = fields[j];//列名
var value = record.data[name];//单元格的数值
var colIndex = cm.findColumnIndex(name);//列号
var rowIndex = store.indexOfId(record.id);//行号
var editor = cm.getCellEditor(colIndex).field;//colIndex使用的编辑器
if (!editor.validateValue(value)) {
Ext.Msg.alert('提示', '请确保输入的数据正确。', function(){
grid.startEditing(rowIndex, colIndex);
});
return;
}
}
