ExtJS4学习笔记(八)---Grid多选/全选

最新推荐文章于 2025-05-10 13:27:01 发布

javaPie

最新推荐文章于 2025-05-10 13:27:01 发布

阅读量8.2k

点赞数

分类专栏： ExtJs

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

本文介绍了如何在ExtJS4 Grid中实现多选与全选功能，并提供了详细的HTML、CSS及JavaScript代码示例。文章还强调了在实现过程中需要注意的关键点。

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

ExtJS4学习笔记(八)---Grid多选/全选

标签： extjs url function query 测试 json

2011-08-02 16:45 2057人阅读评论(0) 收藏举报

 
  分类：
 
  extjs4.0（28）

上一篇文章，在Grid中加入了搜索功能（链接地址是：www.mhzg.net/a/20115/20115219110248.html），但大量数据需要删除操作的时候，总不能一条一条去删除吧，本文介绍如何在Extjs4 Grid中加入全选功能。

先来张效果图：

点击显示所选后：

注意点：

1、需要在JS文件中动态加载“'Ext.selection.CheckboxModel'”

2、服务端要返回数据的id值。

3、Ext.data.Model中，要有id的信息，就是因为JS代码中忘记了写id，导致调试了很久都无法获取id值，从头检查代码的时候才发现错误。

正文：

html代码：

      
    
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Grid多选/全选-MHZG.NET</title>
 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 <style type="text/css">
         #search-results a {
             color: #385F95;
             font:bold 11px tahoma, arial, helvetica, sans-serif;
             text-decoration:none;
         }
         .add {
             background-image:url(../../examples/shared/icons/fam/cog.gif) !important;
         }
         #search-results a:hover {
             text-decoration:underline;
         }
         
         #search-results p {
             margin:3px !important;
         }
         
         .search-item {
             font:normal 11px tahoma, arial, helvetica, sans-serif;
             padding:3px 10px 3px 10px;
             border:1px solid #fff;
             border-bottom:1px solid #eeeeee;
             white-space:normal;
             color:#555;
         }
         .search-item h3 {
             display:block;
             font:inherit;
             font-weight:bold;
             color:#222;
         }
 
         .search-item h3 span {
             float: right;
             font-weight:normal;
             margin:0 0 5px 5px;
             width:100px;
             display:block;
             clear:none;
         }
         
         .x-form-clear-trigger {
             background-image: url(../../resources/themes/images/default/form/clear-trigger.gif);
         }
         
         .x-form-search-trigger {
             background-image: url(../../resources/themes/images/default/form/search-trigger.gif);
         }
     </style>
 <script type="text/javascript" src="../../bootstrap.js"></script>
 <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
 <script type="text/javascript" src="selectgrid.js"></script>
 </head>
 
 <body>
 <div id="demo"></div>
 </body>
 </html>

selectgrid.js：

      
    
 Ext.Loader.setConfig({enabled: true});
 Ext.Loader.setPath('Ext.ux', '../../examples/ux');
 Ext.require([
     'Ext.grid.*',
     'Ext.toolbar.Paging',
     'Ext.util.*',
     'Ext.data.*',
     'Ext.ux.form.SearchField',
     'Ext.selection.CheckboxModel'
 ]);
 
 Ext.onReady(function(){
     Ext.define('MyData',{
         extend: 'Ext.data.Model',
         fields: [
             'id','title','author',
             {name:'hits',type: 'int'},
              'addtime'
         ]
     });
     
     //创建数据源
     var store = Ext.create('Ext.data.Store', {
         //分页大小
         pageSize: 50,
         model: 'MyData',
         //是否在服务端排序
         remoteSort: true,
         proxy: {
            //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
             type: 'ajax',
             url: 'selectgrid.asp',
             
             reader: {
                 root: 'items',
                 totalProperty  : 'total'
             },
             simpleSortMode: true
         },
         sorters: [{
             //排序字段。
             property: 'hits',
             //排序类型，默认为 ASC
             direction: 'DESC'
         }]
     });
     
     //创建多选
      var selModel = Ext.create('Ext.selection.CheckboxModel');
     //创建Grid
     var grid = Ext.create('Ext.grid.Panel',{
         store: store,
         selModel: selModel,
         columnLines: true,
         columns: [
                 {text: "标题", width: 120, dataIndex: 'title', sortable: true},
                 {text: "作者", width: 140, dataIndex: 'author', sortable: false},
                 {text: "点击数", width: 100, dataIndex: 'hits', sortable: true},
             {text: "添加时间", width: 150, dataIndex: 'addtime', sortable: true}
         ],
         height:400,
         width:520,
         x:20,
         y:40,
         title: 'ExtJS4 SearchGrid-Grid 搜索',
         
         disableSelection: false,//值为TRUE，表示禁止选择行
         frame: true,
         loadMask: true,
         renderTo: 'demo',
         viewConfig: {
             id: 'gv',
             trackOver: false,
             stripeRows: false
         },
         dockedItems: [{
             dock: 'top',
             xtype: 'toolbar',
             items: [{
                 itemId: 'Button',
                 text:'显示所选',
                 tooltip:'Add a new row',
                 iconCls:'add',
                 handler:function(){
                     var record = grid.getSelectionModel().getSelection();
                     if(record.length == 0){
                         Ext.MessageBox.show({
                             title:"提示",
                             msg:"请先选择您要操作的行!"
                             //icon: Ext.MessageBox.INFO
                         })
                         return;
                     }else{
                         var ids = "";
                         for(var i = 0; i < record.length; i++){
                             ids += record[i].get("id")
                             if(i<record.length-1){
                                 ids = ids + ",";
                             }
                         }
                         Ext.MessageBox.show({
                             title:"所选ID列表",
                             msg:ids
                             //icon: Ext.MessageBox.INFO
                         })
                     }
                 }
             },'-',{
                 width: 300,
                 fieldLabel: '搜索',
                 labelWidth: 50,
                 xtype: 'searchfield',
                 store: store
             }]
         }, {
             dock: 'bottom',
             xtype: 'pagingtoolbar',
             store: store,
             pageSize: 25,
             displayInfo: true,
             displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
             emptyMsg: '没有数据'
         }]
         
     })
     store.loadPage(1);
 })

服务端selectgrid.asp：

      
    
 <%
     Response.ContentType = "text/html"
     Response.Charset = "UTF-8"
 %>
 <%
 '返回JSON数据,自定义一些测试数据。。
 '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
 '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
 start = Request("start")
 limit = Request("limit")
 '查询时获取的参数。
 query = Request("query")
 If start = "" Then
     start = 0
 End If
 If limit = "" Then
     limit = 50
 End If
 sorts = Replace(Trim(Request.Form("sort")),"'","") 
 dir = Replace(Trim(Request.Form("dir")),"'","")
 
 '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
 If query = "newstitle" Then
     Echo("{")
     Echo("""total"":")
     Echo("""1")
     Echo(""",""items"":[")
     Echo("{")
     Echo("""title"":""newstitle""")
     Echo(",")
     Echo("""author"":""author""")
     Echo(",")
     Echo("""hits"":""100""")
     Echo(",")
     Echo("""addtime"":"""&Now()&"""")
     Echo("}")
     Echo("]}")
 Else
 Dim counts:counts=300
 '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
 
 Dim Ls:Ls = Cint(start) + Cint(limit)
 If Ls >= counts Then
    Ls = counts
 End If
 
 Echo("{")
 Echo("""total"":")
 Echo(""""&counts&""",")
 Echo("""items"":[")
 For i = start+1 To Ls
    Echo("{")
    Echo("""id"":"""&i&"""")
    Echo(",")
    Echo("""title"":""newstitle"&i&"""")
    Echo(",")
    Echo("""author"":""author"&i&"""")
    Echo(",")
    Echo("""hits"":"""&i&"""")
    Echo(",")
    Echo("""addtime"":"""&Now()&"""")
    Echo("}")
    If i<Ls Then
      Echo(",")
    End If
 Next
 
 Echo("]}")
 End If
 Function Echo(str)
    Response.Write(str)
 End Function
 %>