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

最新推荐文章于 2020-12-28 20:42:57 发布

sandykwx

最新推荐文章于 2020-12-28 20:42:57 发布

阅读量462

点赞数

分类专栏： ExtJS

ExtJS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

上一篇文章，在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
%>