0
|
茶语人生发布于2015-9-16 11:14(编辑于 2023-9-6 09:34)
|
555
|
-
gxy120313
这有一段代码,你可以参考下,程序运行结果如图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>
|
|