ExtJS4学习笔记(十二)---ExtJS4 EditGrid(可编辑的Grid)

于 2011-08-30 17:37:20 发布
阅读量5.5k 收藏 4
点赞数
分类专栏： ExtJs ExtJs4.0 JS 文章标签： extjs header 测试 function url plugins
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhaoqiliang527/article/details/6733281
版权
本文介绍如何在ExtJS4中实现EditGrid功能，通过实例代码展示动态修改Grid数据的过程，包括多选、编辑、下拉框等功能。文章以代码为主，附带效果截图，帮助理解。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上一篇文章，在Grid中加入了多选/全选功能，实际运用中，我们可能需要动态修改Grid中的数据，也就是要实现EditGrid功能。本文介绍如何实现Extjs4 EditGrid功能。先发几张效果图。看图说话，更有说服力哦。






 

HTML代码：

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>ExtJS4 EditGrid(可编辑的Grid)-MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  7. <link rel="stylesheet" type="text/css" href="../../examples/ux/css/CheckHeader.css" />
  8. <style type="text/css">
  9.         #search-results a {
  10.             color: #385F95;
  11.             font:bold 11px tahoma, arial, helvetica, sans-serif;
  12.             text-decoration:none;
  13.         }
  14.         .add {
  15.             background-image:url(../../examples/shared/icons/fam/cog.gif) !important;
  16.         }
  17.         #search-results a:hover {
  18.             text-decoration:underline;
  19.         }
  20.         
  21.         #search-results p {
  22.             margin:3px !important;
  23.         }
  24.         
  25.         .search-item {
  26.             font:normal 11px tahoma, arial, helvetica, sans-serif;
  27.             padding:3px 10px 3px 10px;
  28.             border:1px solid #fff;
  29.             border-bottom:1px solid #eeeeee;
  30.             white-space:normal;
  31.             color:#555;
  32.         }
  33.         .search-item h3 {
  34.             display:block;
  35.             font:inherit;
  36.             font-weight:bold;
  37.             color:#222;
  38.         }

  40.         .search-item h3 span {
  41.             float: right;
  42.             font-weight:normal;
  43.             margin:0 0 5px 5px;
  44.             width:100px;
  45.             display:block;
  46.             clear:none;
  47.         }
  48.         
  49.         .x-form-clear-trigger {
  50.             background-image: url(../../resources/themes/images/default/form/clear-trigger.gif);
  51.         }
  52.         
  53.         .x-form-search-trigger {
  54.             background-image: url(../../resources/themes/images/default/form/search-trigger.gif);
  55.         }
  56.     </style>
  57. <script type="text/javascript" src="../../bootstrap.js"></script>
  58. <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
  59. <script type="text/javascript" src="editgrid.js"></script>
  60. </head>

  62. <body>
  63. <div id="demo"></div>
  64. </body>
  65. </html>

editgrid.js：

 
  1. Ext.Loader.setConfig({enabled: true});
  2. Ext.Loader.setPath('Ext.ux', '../../examples/ux');
  3. Ext.require([
  4.     'Ext.grid.*',
  5.     'Ext.toolbar.Paging',
  6.     'Ext.util.*',
  7.     'Ext.data.*',
  8.     'Ext.state.*',
  9.     'Ext.form.*',
  10.     'Ext.ux.form.SearchField',
  11.     'Ext.selection.CellModel',
  12.     'Ext.ux.CheckColumn',
  13.     'Ext.selection.CheckboxModel'
  14. ]);

  16. Ext.onReady(function(){
  17.     var isEdit = false;
  18.     
  19.     function formatDate(value){
  20.         return value ? Ext.Date.dateFormat(value, 'Y-m-d') : '';
  21.     }
  22.     
  23.     Ext.define('MyData',{
  24.         extend: 'Ext.data.Model',
  25.         fields: [
  26.             {name:'id'},
  27.             {name:'title',type:'string'},
  28.             {name:'author'},
  29.             {name:'hits',type: 'int'},
  30.             {name:'addtime',type:'date',dataFormat:'Y-m-d'},
  31.             {name:'checked',type:'bool'}
  32.         ]
  33.     });
  34.     
  35.     //创建数据源
  36.     var store = Ext.create('Ext.data.Store', {
  37.         //分页大小
  38.         pageSize: 50,
  39.         model: 'MyData',
  40.         //是否在服务端排序
  41.         remoteSort: true,
  42.         autoDestroy: true,
  43.         proxy: {
  44.            //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
  45.             type: 'ajax',
  46.             url: 'editgrid.asp',
  47.             
  48.             reader: {
  49.                 root: 'items',
  50.                 totalProperty  : 'total'
  51.             },
  52.             simpleSortMode: true
  53.         },
  54.         sorters: [{
  55.             //排序字段。
  56.             property: 'hits',
  57.             //排序类型，默认为 ASC
  58.             direction: 'DESC'
  59.         }]
  60.     });
  61.     //下拉框数据,测试数据。
  62.     var cbstore = Ext.create('Ext.data.Store', { 
  63.     fields: ['id', 'name'], 
  64.     data : [ 
  65.         {"id":"1","name":"佚名"},
  66.         {"id":"2","name":"管理员"},
  67.         {"id":"3","name":"编辑"},
  68.         {"id":"4","name":"总编辑"},
  69.         {"id":"5","name":"测试员"}
  70.     ]
  71. }); 

  73.     
  74.     //创建多选
  75.      var selModel = Ext.create('Ext.selection.CheckboxModel');
  76.      var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
  77.         clicksToEdit: 1
  78.      });
  79.     //创建Grid
  80.     var grid = Ext.create('Ext.grid.Panel',{
  81.         store: store,
  82.         selModel: selModel,
  83.         columnLines: true,
  84.         columns: [{
  85.             id:"title",
  86.             header: "标题", 
  87.             width: 110, 
  88.             dataIndex: 'title', 
  89.             sortable: true,
  90.             field: {
  91.                 allowBlank: false
  92.             }
  93.         },{
  94.             header: "作者",
  95.             width: 120, 
  96.             dataIndex: 'author', 
  97.             id:'gc',
  98.             sortable: false,
  99.             field: {
  100.                 xtype: 'combobox',
  101.                 id:'authors',
  102.                 typeAhead: true,
  103.                 triggerAction: 'all',
  104.                 queryMode: 'local', 
  105.                 selectOnTab: true,
  106.                 store: cbstore,
  107.                 lazyRender: true,
  108.                 displayField:'name',
  109.                 valueField:'id',
  110.                 listClass: 'x-combo-list-small',
  111.                 listeners:{    
  112.                     select : function(combo, record,index){
  113.                         isEdit = true;
  114.                     }
  115.                 }
  116.                  
  117.             },
  118.             renderer:rendererData
  119.         },{
  120.             header: "点击数", 
  121.             width: 80, 
  122.             dataIndex: 'hits', 
  123.             sortable: true,
  124.             field: {
  125.                 xtype: 'numberfield',
  126.                 allowBlank: false,
  127.                 minValue: 0,
  128.                 maxValue: 100000
  129.             }
  130.         },{
  131.             header: "添加时间", 
  132.             width: 100, 
  133.             dataIndex: 'addtime', 
  134.             sortable: true,
  135.             renderer: formatDate,
  136.             field: {
  137.                 xtype: 'datefield',
  138.                 format: 'y-m-d',
  139.                 minValue: '01/01/06'
  140.             }
  141.         },{
  142.             xtype: 'checkcolumn',
  143.             header:'审核',
  144.             dataIndex:'checked',
  145.             width:55
  146.         }],
  147.         height:400,
  148.         width:520,
  149.         x:20,
  150.         y:40,
  151.         title: 'ExtJS4 EditGrid(可编辑的Grid)',
  152.         
  153.         disableSelection: false,//值为TRUE，表示禁止选择
  154.         frame: true,
  155.         selType: 'cellmodel',
  156.         loadMask: true,
  157.         renderTo: 'demo',
  158.         viewConfig: {
  159.             id: 'gv',
  160.             trackOver: false,
  161.             stripeRows: false
  162.         },
  163.         dockedItems: [{
  164.             dock: 'top',
  165.             xtype: 'toolbar',
  166.             items: [{
  167.                 itemId: 'Button',
  168.                 text:'显示所选',
  169.                 tooltip:'Add a new row',
  170.                 iconCls:'add',
  171.                 handler:function(){
  172.                     var record = grid.getSelectionModel().getSelection();
  173.                     if(record.length == 0){
  174.                         Ext.MessageBox.show({
  175.                             title:"提示",
  176.                             msg:"请先选择您要操作的行!",
  177.                             icon: Ext.MessageBox.INFO,
  178.                             buttons: Ext.Msg.OK
  179.                         })
  180.                         return;
  181.                     }else{
  182.                         var ids = "";
  183.                         for(var i = 0; i < record.length; i++){
  184.                             ids += record[i].get("id")
  185.                             if(i<record.length-1){
  186.                                 ids = ids + ",";
  187.                             }
  188.                         }
  189.                         Ext.MessageBox.show({
  190.                             title:"所选ID列表",
  191.                             msg:ids
  192.                             //icon: Ext.MessageBox.INFO
  193.                         })
  194.                     }
  195.                 }
  196.             },'-',{
  197.                 width: 300,
  198.                 fieldLabel: '搜索',
  199.                 labelWidth: 50,
  200.                 xtype: 'searchfield',
  201.                 store: store
  202.             }]
  203.         }, {
  204.             dock: 'bottom',
  205.             xtype: 'pagingtoolbar',
  206.             store: store,
  207.             pageSize: 25,
  208.             displayInfo: true,
  209.             displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
  210.             emptyMsg: '没有数据'
  211.         }],
  212.         plugins: [cellEditing]
  213.         
  214.     })
  215.     store.loadPage(1);
  216.     grid.on('edit', onEdit, this);
  217.     
  218.     function onEdit(){
  219.         var record = grid.getSelectionModel().getSelection()[0];
  220.         //这里进行异步操作，关于Extjs的异步操作这里不做演示，仅列出所有值。
  221.         var title   = record.get('title');
  222.         var author  = record.get('author');//注意，这里得到的是id值，而不是name值,如果没有修改作者，那么得到的值是默认显示的字符串，这个需要在服务端进行判断并处理。
  223.         var clk     = record.get('hits');
  224.         var addtime = Ext.Date.dateFormat(record.get('addtime'), 'Y-m-d');
  225.         var checked = record.get('checked');
  226.         Ext.MessageBox.show({
  227.             title:"修改的数据为",
  228.             msg:title+"\r\n"+author+"\r\n"+clk+"\r\n"+addtime+"\r\n"+checked,
  229.             icon: Ext.MessageBox.INFO,
  230.             buttons: Ext.Msg.OK
  231.         })
  232.     }
  233.     
  234.     function rendererData(value,metadata,record){
  235.         if(isEdit){
  236.             var index = cbstore.find(Ext.getCmp('authors').valueField,value);
  237.             var record = cbstore.getAt(index);
  238.             return record.data.name;
  239.         }else{
  240.             return value;
  241.         }
  242.         
  243.     }
  244. })
 

editgrid.asp：时间关系，只简单做了些测试数据。

 
  1. <%
  2.     Response.ContentType = "text/html"
  3.     Response.Charset = "UTF-8"
  4. %>
  5. <%
  6. '返回JSON数据,自定义一些测试数据。。
  7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
  8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
  9. start = Request("start")
  10. limit = Request("limit")
  11. '查询时获取的参数。
  12. query = Request("query")
  13. If start = "" Then
  14.     start = 0
  15. End If
  16. If limit = "" Then
  17.     limit = 50
  18. End If
  19. sorts = Replace(Trim(Request.Form("sort")),"'","") 
  20. dir = Replace(Trim(Request.Form("dir")),"'","")

  22. '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
  23. If query = "newstitle" Then
  24.     Echo("{")
  25.     Echo("""total"":")
  26.     Echo("""1")
  27.     Echo(""",""items"":[")
  28.     Echo("{")
  29.     Echo("""title"":""newstitle""")
  30.     Echo(",")
  31.     Echo("""author"":""author""")
  32.     Echo(",")
  33.     Echo("""hits"":""100""")
  34.     Echo(",")
  35.     Echo("""addtime"":"""&Now()&"""")
  36.     Echo("}")
  37.     Echo("]}")
  38. Else
  39. Dim counts:counts=20
  40. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。

  42. Dim Ls:Ls = Cint(start) + Cint(limit)
  43. If Ls >= counts Then
  44.    Ls = counts
  45. End If

  47. Echo("{")
  48. Echo("""total"":")
  49. Echo(""""&counts&""",")
  50. Echo("""items"":[")
  51. For i = start+1 To Ls
  52.    Echo("{")
  53.    Echo("""id"":"""&i&"""")
  54.    Echo(",")
  55.    Echo("""title"":""newstitle"&i&"""")
  56.    Echo(",")
  57.    Echo("""author"":""author"&i&"""")
  58.    Echo(",")
  59.    Echo("""hits"":"""&i&"""")
  60.    Echo(",")
  61.    Echo("""addtime"":"""&Now()&"""")
  62.    Echo(",")
  63.    If i Mod 4 = 0 Then
  64.       Echo("""checked"":""true""")
  65.    Else
  66.       Echo("""checked"":""false""")
  67.    End If
  68.    Echo("}")
  69.    If i<Ls Then
  70.       Echo(",")
  71.    End If
  72. Next

  74. Echo("]}")
  75. End If
  76. Function Echo(str)
  77.    Response.Write(str)
  78. End Function
  79. %>

 

由于4.x有了重大更新，所以很多在3.x中的东西在4.x里并不好使，直接导致了本文迟迟没有发表，原因就出在了更新下拉框后，Grid中显示的是ID号而不是name值。一番查看API及研究，终于发现问题所在，3.x中renderer combobox在4.x并不好用，最后重新读了一遍自己写的代码，才有所顿悟。希望文章能起到一个抛砖引玉的作用，大家一起进步。


评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值