ExtJS4学习笔记(八)---Grid多选/全选
来源:互联网 发布:centos系统版本命令 编辑:程序博客网 时间:2024/06/05 21:47
上一篇文章,在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');//创建Gridvar 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 = "" Thenstart = 0End IfIf limit = "" Thenlimit = 50End Ifsorts = 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("]}")ElseDim counts:counts=300'注意,这里的counts相当于Rs.RecordCount,也就是记录总数。Dim Ls:Ls = Cint(start) + Cint(limit)If Ls >= counts Then Ls = countsEnd IfEcho("{")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 IfNextEcho("]}")End IfFunction Echo(str) Response.Write(str)End Function%>
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(五)---Grid分页
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(五)---Grid分页
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- Extjs4---Checkbox,多选,全选
- Extjs4---Checkbox,多选,全选
- ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)
- ExtJS4学习笔记十--Grid使用
- ExtJS4学习笔记十--Grid使用
- ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(五)---Grid分页
- SQLSERVER约束
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
- ExtJS4学习笔记(十一)---TabPanel
- ExtJS4学习笔记(十二)---选项卡(tabs)
- ExtJS4学习笔记(十三)---上传文件(upload)
- ExtJS4学习笔记(十四)--- ComponentQuery
- ExtJS4学习笔记(十四)--- ComponentQuery
- ExtJS4学习笔记(十五)---Ext.data.Model