Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([{
header: '编号',
dataIndex: 'id',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank: false
})
)
}, {
header: '名称',
dataIndex: 'name',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank: false
})
)
}, {
header: '描述',
dataIndex: 'descn',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank: false
})
)
}]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
var Record = Ext.data.Record.create([
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'descn', type: 'string'}
]);
store.load();
var grid = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
tbar: new Ext.Toolbar(['-', {
text: '添加一行',
handler: function(){
var initValue = {id:'',name:'',descn:''};
var p = new Record(initValue);
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
p.dirty = true;
p.modified = initValue;
if(store.modified.indexOf(p) == -1){
store.modified.push(p);
}
}
}, '-', {
text: '删除一行',
handler: function(){
Ext.Msg.confirm('信息', '确定要删除?', function(btn){
if (btn == 'yes') {
var sm = grid.getSelectionModel();
var cell = sm.getSelectedCell();
var record = store.getAt(cell[0]);
store.remove(record);
}
});
}
}, '-', {
text: '保存',
handler: function(){
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;//使用的编辑器
if (!editor.validateValue(value)) {
Ext.Msg.alert('提示', '请确保输入的数据正确。', function(){
grid.startEditing(rowIndex, colIndex);//如果不通过激活当前编辑状态
});
return;
}
}
}
// 进行到这里,说明数据都是有效的
var jsonArray = [];
Ext.each(m, function(item) {
jsonArray.push(item.data);
});
Ext.lib.Ajax.request(
'POST',
'grid2.jsp',
{success: function(response){
Ext.Msg.alert('信息', response.responseText, function(){
store.reload();
});
},failure: function(){
Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
}},
'data=' + encodeURIComponent(Ext.encode(jsonArray))
);
}
}, '-'])
});
});
EXT编辑表格保存并且验证不能为空
最新推荐文章于 2020-12-10 11:29:21 发布