论坛首页 → Web前端技术论坛 →

ext1.1.1 可编辑的grid例子！

浏览 9055 次
锁定老帖子 主题：ext1.1.1 可编辑的grid例子！
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • tylzhuang
  • 等级: 二星会员
  • 性别:
  • 文章: 25
  • 积分: 222
  • 来自: 上海
   发表时间：2007-09-13  

ext可编辑的例子：

js 代码
  1. /*  
  2.  * hr  
  3.  * Copyright(c) 2006-2007, tylzhuang.  
  4.  */  
  5.   
  6. var GridUI = function() {   
  7.   
  8.     var myPageSize = 20;   
  9.     // shorthand alias   
  10.     var fm = Ext.form, Ed = Ext.grid.GridEditor;   
  11.        
  12.     // the column model has information about grid columns   
  13.     // dataIndex maps the column to the specific data field in   
  14.     // the data store (created below)   
  15.     var gridForm;   
  16.     function initForm()   
  17.     {   
  18.         gridForm = new Ext.BasicForm(   
  19.             Ext.get("gridFm"),   
  20.             {}   
  21.         );   
  22.     }   
  23.     var cm;   
  24.     function getCm()   
  25.     {   
  26.         if(!cm)   
  27.         {   
  28.             cm= new Ext.grid.ColumnModel([{   
  29.                    id: 'bh',   
  30.                    header: "编号",   
  31.                    dataIndex: 'bh',   
  32.                    hidden: false  
  33.                 },   
  34.                 {  header: "说明",   
  35.                    dataIndex: 'sm',   
  36.                    width: 300,   
  37.                    hidden: false,   
  38.                    editor: new Ed(new fm.TextField({   
  39.                        allowBlank: false  
  40.                    }))   
  41.                    }   
  42.               ]);   
  43.   
  44.             // by default columns are sortable   
  45.             cm.defaultSortable = true;   
  46.                
  47.         }   
  48.         return cm;   
  49.     }   
  50.   
  51.   
  52.   
  53.   
  54.     // create the Data Store   
  55.     var ds;   
  56.     var Plant;   
  57.     function setupDs()   
  58.     {   
  59.         // this could be inline, but we want to define the Plant record   
  60.         // type so we can add records dynamically   
  61.         Plant = Ext.data.Record.create([   
  62.                // the "name" below matches the tag name to read, except "availDate"   
  63.                // which is mapped to the tag "availability"   
  64.                {name: 'bh', mapping: 'bh', type: 'string'},   
  65.                {name: 'sm', mapping: 'sm', type: 'string'}   
  66.           ]);   
  67.         ds = new Ext.data.Store({   
  68.             // load using script tags for cross domain, if the data in on the same domain as   
  69.             // this page, an HttpProxy would be better   
  70.             proxy: new Ext.data.HttpProxy({   
  71.                    
  72.                 url: myPath + '/editBaseData.do?eventSubmit_doList=doList'   
  73.             }),   
  74.   
  75.             // create reader that reads the Topic records   
  76.             reader: new Ext.data.JsonReader({   
  77.                 root: 'results',   
  78.                 totalProperty: 'totalCount',   
  79.                 id: 'bh'   
  80.             }, Plant),   
  81.   
  82.             // turn on remote sorting   
  83.             remoteSort: true  
  84.         });   
  85.         ds.setDefaultSort('bh', 'ASC');//排序用的列名和排序方式   
  86.   
  87.         ds.baseParams = {tableName : tableName};   
  88.         // trigger the data store load   
  89.         ds.load({params:{start:0, limit:myPageSize}});   
  90.     }   
  91.     // create the editor grid   
  92.     var grid;   
  93.     function buildGrid()   
  94.     {   
  95.         grid = new Ext.grid.EditorGrid('editor-grid', {   
  96.             ds: ds,   
  97.             cm: getCm(),   
  98.             //selModel: new Ext.grid.CellSelectionModel(),   
  99.             selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),   
  100.             enableColLock:false  
  101.         });   
  102.   
  103.         // render it   
  104.         grid.render();   
  105.   
  106.         grid.loadMask = {msg: '正在加载数据，请等待...'};   
  107.   
  108.         var gridFoot = grid.getView().getFooterPanel(true);   
  109.   
  110.         // add a paging toolbar to the grid's footer   
  111.         var paging = new Ext.PagingToolbar(gridFoot, ds, {   
  112.             pageSize: myPageSize,   
  113.             displayInfo: true,   
  114.             displayMsg: '总 {2} 条记录，当前显示 {0} - {1}',   
  115.             emptyMsg: "没有记录"  
  116.         });   
  117.         // add the detailed view button   
  118.         paging.add('-', {   
  119.             pressed: true,   
  120.             enableToggle:true,   
  121.             text: '增加',   
  122.             cls: '',   
  123.             toggleHandler: doAdd   
  124.         });   
  125.         // add the detailed view button   
  126.   
  127.         paging.add('-', {   
  128.             pressed: true,   
  129.             enableToggle:true,   
  130.             text: '提交',   
  131.             cls: '',   
  132.             toggleHandler: doMod   
  133.         });        
  134.   
  135.         // add the detailed view button   
  136.         paging.add('-', {   
  137.             pressed: true,   
  138.             enableToggle:true,   
  139.             text: '删除',   
  140.             cls: '',   
  141.             toggleHandler: doDel   
  142.         });      
  143.     }     
  144.   
  145.     function getModifiedData(){   
  146.         var m = ds.modified.slice(0);   
  147.         //ds.modified = [];//将修改过的记录置为空   
  148.         for(var i = 0, len = m.length; i < len; i++){   
  149.            alert(m[i].data['sm']);   
  150.         }          
  151.     }   
  152.     function doAdd(){   
  153.             var p = new Plant({   
  154.                 bh: '',   
  155.                 sm: ''         
  156.             });   
  157.             grid.stopEditing();   
  158.             //alert(ds.data.length);   
  159.             ds.insert(0, p);   
  160.             grid.startEditing(0, 1);   
  161.     }   
  162.     function doMod(){   
  163.         var m = ds.modified.slice(0);   
  164.         if(m.length > 0)   
  165.         {   
  166.             Ext.MessageBox.confirm('提示框', '您确定要进行该操作？' , doMod2);      
  167.         }   
  168.         else  
  169.         {   
  170.             Ext.MessageBox.alert('提示框', '对不起，您没有增加或修改记录！');   
  171.         }   
  172.     }   
  173.     function doMod2(btn){   
  174.        //alert(btn);   
  175.        if(btn == 'yes')   
  176.        {   
  177.             var m = ds.getModifiedRecords();   
  178.             jsonData = "[";    
  179.             for(var i = 0, len = m.length; i < len; i++) {   
  180.                 jsonData += JSON.stringify(m[i].data) + ",";   
  181.             }   
  182.             jsonData = jsonData.substring(0, jsonData.length-1) + "]";   
  183.   
  184.             gridForm.url = myPath + '/editBaseData.do?eventSubmit_doEdit=doEdit&tableName=' + tableName;   
  185.             var options =    
  186.             {   
  187.                 waitMsg: '正在处理中，请等待...',   
  188.                 waitTitle: '进度条',   
  189.                 reset: false,   
  190.                 success: function(isOk, a) {   
  191.                     Ext.MessageBox.alert('提示框', a.result.msg);   
  192.                     if(isOk){   
  193.                         ds.modified = [];//将修改过的记录置为空，如果不清空，则修改过的数据会一直保留   
  194.                         ds.load({params:{start:0, limit:myPageSize}});   
  195.                     }   
  196.                 },   
  197.                 params:{modData:jsonData},   
  198.                 scope: gridForm   
  199.             }   
  200.             gridForm.submit(options);            
  201.        }   
  202.        else  
  203.        {   
  204.             //Ext.MessageBox.alert('提示框', '您取消了该操作！');   
  205.        }            
  206.     }    
  207.   
  208.     function doDel(){   
  209.         var m = grid.getSelections();   
  210.         if(m.length > 0)   
  211.         {   
  212.             Ext.MessageBox.confirm('提示框', '您确定要进行该操作？' , doDel2);      
  213.         }   
  214.         else  
  215.         {   
  216.             Ext.MessageBox.alert('提示框', '对不起，请选择要删除的记录！');   
  217.         }   
  218.     }          
  219.     function doDel2(btn)   
  220.     {   
  221.        if(btn == 'yes')   
  222.        {       
  223.             var m = grid.getSelections();   
  224.             //alert(m.length);   
  225.             var jsonData = '[' + JSON.stringify(m[0].data);   
  226.             for(i=1;i<m.length;i++)   
  227.             {   
  228.                 jsonData = jsonData + ',' + JSON.stringify(m[i].data);                 
  229.             }   
  230.             jsonData = jsonData + ']' ;    
  231.             gridForm.url = myPath + '/editBaseData.do?eventSubmit_doDel=doDel&tableName=' + tableName;   
  232.             var options =    
  233.             {   
  234.                 waitMsg: '正在处理中，请等待...',   
  235.                 waitTitle: '进度条',   
  236.                 reset: false,   
  237.                 success: function(isOk, a) {   
  238.                     Ext.MessageBox.alert('提示框', a.result.msg);   
  239.                     if(isOk){   
  240.                         ds.load({params:{start:0, limit:myPageSize}});   
  241.                     }   
  242.                 },   
  243.                 params:{delData:jsonData},   
  244.                 scope: gridForm   
  245.             }   
  246.             gridForm.submit(options);          
  247.         }   
  248.         else  
  249.         {   
  250.             //Ext.MessageBox.alert('提示框', '您取消了该操作！');   
  251.             grid.getSelectionModel().clearSelections();            
  252.         }   
  253.     }   
  254.        
  255.     return {   
  256.         init : function() {   
  257.             initForm();   
  258.             setupDs();   
  259.             buildGrid();   
  260.         },         
  261.         getDs: function() {   
  262.             return ds;   
  263.         }          
  264.     }          
  265. }();   
  266. Ext.onReady(GridUI.init, GridUI, true);   
  267.   

 

java 代码
  1. public ActionForward doEdit(ActionMapping mapping, ActionForm form,   
  2.         HttpServletRequest request, HttpServletResponse response)   
  3.         throws Exception {   
  4.     try {   
  5.         String tableName = (String) request   
  6.                 .getParameter("tableName");   
  7.         System.out.println("-----tableName--1----" + tableName);   
  8.         // 从前台获得组织json格式数据进行传送   
  9.         String modData = (String) request.getParameter("modData");   
  10.         if (modData != null) {   
  11.             System.out.println("-----modData--1----" + modData);   
  12.             JSONArray jsonArr = new JSONArray(modData);   
  13.             for (int i = 0; i < jsonArr.length(); i++) {   
  14.                 String bh = jsonArr.getJSONObject(i).getString("bh");   
  15.                 String sm = jsonArr.getJSONObject(i).getString("sm");   
  16.                 // sm = Escape.unescape(sm);   
  17.                 System.out.println("-----bh--2----" + bh);   
  18.                 System.out.println("-----sm--2----" + sm);   
  19.                 if (bh != null && !bh.equals("")) {   
  20.                     System.out.println(" bh == " + bh + "  sm == " + sm);   
  21.                     StringBuffer sql = new StringBuffer(" update ").append(   
  22.                             tableName).append(" set sm='").append(sm)   
  23.                             .append("' where bh=").append(bh);   
  24.                     System.out.println("update sql == " + sql);   
  25.                     int iii = BasePeer.executeStatement(sql.toString());   
  26.                     System.out.println("update result == " + iii);   
  27.                 } else {   
  28.                     System.out.println(" bh == " + bh + "  sm == " + sm);   
  29.                     StringBuffer sql = new StringBuffer(" insert into ")   
  30.                             .append(tableName).append(" (sm) values ('")   
  31.                             .append(sm).append("')");   
  32.                     System.out.println("insert sql == " + sql);   
  33.                     int iii = BasePeer.executeStatement(sql.toString());   
  34.                     System.out.println("insert result == " + iii);   
  35.                 }   
  36.             }   
  37.         }   
  38.         ResponseUtil.procFormResponse(response, true, "提交编辑成功！");   
  39.     } catch (Exception ex) {   
  40.         System.out.println("-----failure------" + ex);   
  41.         ResponseUtil.procFormResponse(response, false, "提交编辑失败，出现异常："  
  42.                 + ex.getMessage());   
  43.     }   
  44.     return null;   
  45. }   
  46.   
  47. public ActionForward doDel(ActionMapping mapping, ActionForm form,   
  48.         HttpServletRequest request, HttpServletResponse response)   
  49.         throws Exception {   
  50.     try {   
  51.         String tableName = (String) (String) request   
  52.                 .getParameter("tableName");   
  53.         System.out.println("--doDel---tableName--1----" + tableName);   
  54.   
  55.         // 从前台获得组织json格式数据进行传送   
  56.         String delData = (String) request.getParameter("delData");   
  57.         if (delData != null) {   
  58.             delData = Convertor.iso2utf(delData);   
  59.             System.out.println("-----delData--1----" + delData);   
  60.             JSONArray jsonArr = new JSONArray(delData);   
  61.             for (int i = 0; i < jsonArr.length(); i++) {   
  62.                 String bh = jsonArr.getJSONObject(i).getString("bh");   
  63.                 if (bh != null && !bh.equals("")) {   
  64.                     System.out.println(" bh == " + bh);   
  65.                     StringBuffer sql = new StringBuffer(" delete from ")   
  66.                             .append(tableName).append(" where bh=").append(   
  67.                                     bh);   
  68.                     System.out.println("delete sql == " + sql);   
  69.                     int iii = BasePeer.executeStatement(sql.toString());   
  70.                     System.out.println("delete result == " + iii);   
  71.                 }   
  72.             }   
  73.         }   
  74.         ResponseUtil.procResponse(response, true, "删除成功！");   
  75.     } catch (Exception ex) {   
  76.         System.out.println("-----failure------" + ex);   
  77.         ResponseUtil.procResponse(response, false, "删除失败，出现异常："  
  78.                 + ex.getMessage());   
  79.     }   
  80.     return null;   
  81. }   

 
返回顶楼
         
  • cnliuxj
  • 等级: 初级会员
  • 性别:
  • 文章: 24
  • 积分: 76
  • 来自: 南京
   发表时间：2007-09-13  
nice,如果有导出Excel文件功能就完美了，建议LZ再进一步
返回顶楼
          回帖地址
0 请登录后投票
  • sugerboy
  • 等级: 初级会员
  • 性别:
  • 文章: 3
  • 积分: 30
  • 来自: 济南
   发表时间：2008-01-04  
请教楼主，你那JSON.stringify是从json.js中来的吗？我把它link到我的页面，js提示仍然找不到JSON,请教一下这是什么原因
返回顶楼
          回帖地址
0 请登录后投票
  • stworthy
  • 等级: 五星会员
  • 文章: 307
  • 积分: 714
  • 来自: ...
   发表时间：2008-01-04  
建议升级到EXT2.0。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics