您的位置：首页 > Web前端 > JavaScript
Ext Js 3.2 EditorGridPanel 加入一行后进行保存并进行数据验证

2011-11-10 19:46 323 查看
1：代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>gridPanel</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
var cum = new Ext.grid.ColumnModel([{
header: "编号",
dataIndex: "ID_NO",
editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)
},{
header: "电话号码",
dataIndex: "PHONE_NO",
editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)
},{
header: "集团编码",
dataIndex: "UNIT_ID",
editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)
},{
header: "集团名称",
dataIndex: "UNIT_NAME",
editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)
},{
header: "客户经理编号",
dataIndex: "SERVICE_NO",
editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)
},{
header: "客户经理名称",
dataIndex: "SERVICE_NAME",
editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)
}
]);
var data = [
[1,'60261938','0001','集团1','1001','李晓红'],
[2,'60261939','0002','集团2','1002','郭阳'],
[3,'60261940','0003','集团3','1003','李小璐'],
[4,'60261941','0004','集团4','1004','杨娜'],
[5,'60261942','0005','集团5','1005','谢删'],
[6,'60261943','0006','集团6','1006','马艳艳'],
[7,'60261944','0007','集团7','1007','徐贝贝'],
[8,'60261945','0008','集团8','1008','周四向'],
[9,'60261956','0009','集团9','1009','李四光']
];

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'ID_NO'},
{name: 'PHONE_NO'},
{name: 'UNIT_ID'},
{name: 'UNIT_NAME'},
{name: 'SERVICE_NO'},
{name: 'SERVICE_NAME'}
])
});
var Record = Ext.data.Record.create([
{name: 'ID_NO',type:'int',mapping:'ID_NO'},
{name: 'PHONE_NO',type:'string',mapping:'PHONE_NO'},
{name: 'UNIT_ID',type:'string',mapping:'UNIT_ID'},
{name: 'UNIT_NAME',type:'string',mapping:'UNIT_NAME'},
{name: 'SERVICE_NO',type:'string',mapping:'SERVICE_NO'},
{name: 'SERVICE_NAME',type:'string',mapping:'SERVICE_NAME'}
]);
store.load();
var grid = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'cumgrid',
store: store,
cm: cum,
tbar: new Ext.Toolbar(['-', {
text: '添加一行',
handler: function(){
var p = new Record({
ID_NO:'',
PHONE_NO:'',
UNIT_ID:'',
UNIT_NAME:'',
SERVICE_NO:'',
SERVICE_NAME:''
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}, '-', {
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(){
//得到我们新添加的Record的集合
var modified = store.modified.slice(0);
//将数据放到另一个数组中
var jsonArray = [];
Ext.each(modified, function(item) {
//alert(item.data.ADDRESS);//读取当前被修改的记录的地址
jsonArray.push(item.data);	//item.data中保存的是当前Record的所有字段的值(JSON)，不包含结构信息
});
var r = checkData(modified);
if(!r){
return;
}else{
//通过ajax请求将修改的记录发送到服务器
Ext.lib.Ajax.request(
'POST',//最好不要用get请求
'Unit9/saveData.jsp',
{success: function(response){
Ext.Msg.alert('添加成功', response.responseText, function(){
//store.reload();
});
},failure: function(){
Ext.Msg.alert("失败信息", "与后台联系的时候出现了问题");
}},
'data=' + encodeURIComponent(Ext.encode(jsonArray))
);
}
}
},'-'])
});
//验证输入的数据是否有效
var checkData = function(modified){
var result = true;
Ext.each(modified,function(record){
var keys = record.fields.keys;//获取Record的所有名称
Ext.each(keys,function(name){
//根据名称获取对应的值
var value = record.data[name];
//得到指定名称所在的列索引
var colIndex = cum.findColumnIndex(name);
//得到指定名称所在的行索引
var rowIndex = grid.getStore().indexOfId(record.id);
//根据行列索引找出组件编辑器
var editor = cum.getCellEditor(colIndex).field;
//验证值是否合法
var r = editor.validateValue(value);
if(!r){
Ext.MessageBox.alert("验证数据","对不起,您输入的数据非法",function(){
grid.startEditing(rowIndex,colIndex);
});
result = false;
return;
}
});
});
return result;
}
});
</script>
</head>

<body>
<div id="cumgrid"></div>
</body>
</html>
2：程序效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航