上一篇文章,在Grid中加入了搜索功能,但大量数据需要删除操作的时候,总不能一条一条去删除吧,本文介绍如何在Extjs4 Grid中加入全选功能。
先来张效果图:
![](http://hi.csdn.net/attachment/201108/30/0_13146969413SAk.gif)
点击显示所选后:
![](http://hi.csdn.net/attachment/201108/30/0_1314696944WWeu.gif)
注意点:
1、需要在JS文件中动态加载“'Ext.selection.CheckboxModel'”
2、服务端要返回数据的id值。
3、Ext.data.Model中,要有id的信息,就是因为JS代码中忘记了写id,导致调试了很久都无法获取id值,从头检查代码的时候才发现错误。
正文:
html代码:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
-
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>Grid多选/全选-MHZG.NET</title>
-
<linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
-
<styletype="text/css">
-
#search-resultsa{
- color:#385F95;
-
font:bold11pxtahoma,arial,helvetica,sans-serif;
- text-decoration:none;
- }
- .add{
- background-image:url(../../examples/shared/icons/fam/cog.gif)!important;
-
}
-
#search-resultsa:hover{
- text-decoration:underline;
-
}
-
-
#search-resultsp{
- margin:3px!important;
- }
-
- .search-item{
- font:normal11pxtahoma,arial,helvetica,sans-serif;
- padding:3px10px3px10px;
- border:1pxsolid#fff;
- border-bottom:1pxsolid#eeeeee;
- white-space:normal;
- color:#555;
- }
- .search-itemh3{
- display:block;
- font:inherit;
- font-weight:bold;
- color:#222;
- }
-
- .search-itemh3span{
- float:right;
- font-weight:normal;
- margin:005px5px;
- 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>
-
<scripttype="text/javascript"src="../../bootstrap.js"></script>
-
<scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>
-
<scripttype="text/javascript"src="selectgrid.js"></script>
- </head>
-
- <body>
-
<divid="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'
- ]
- });
-
-
-
varstore=Ext.create('Ext.data.Store',{
-
- pageSize:50,
-
model:'MyData',
-
-
remoteSort:true,
- proxy:{
-
-
type:'ajax',
-
url:'selectgrid.asp',
-
- reader:{
-
root:'items',
-
totalProperty:'total'
- },
-
simpleSortMode:true
- },
- sorters:[{
-
-
property:'hits',
-
-
direction:'DESC'
- }]
- });
-
-
-
varselModel=Ext.create('Ext.selection.CheckboxModel');
-
-
vargrid=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:'ExtJS4SearchGrid-Grid搜索',
-
-
disableSelection:false,
-
frame:true,
-
loadMask:true,
-
renderTo:'demo',
- viewConfig:{
-
id:'gv',
-
trackOver:false,
-
stripeRows:false
- },
- dockedItems:[{
-
dock:'top',
-
xtype:'toolbar',
- items:[{
-
itemId:'Button',
-
text:'显示所选',
-
tooltip:'Addanewrow',
-
iconCls:'add',
-
handler:function(){
-
varrecord=grid.getSelectionModel().getSelection();
-
if(record.length==0){
- Ext.MessageBox.show({
-
title:"提示",
-
msg:"请先选择您要操作的行!"
-
- })
-
return;
-
}else{
-
varids="";
-
for(vari=0;i<record.length;i++){
-
ids+=record[i].get("id")
-
if(i<record.length-1){
-
ids=ids+",";
- }
- }
- Ext.MessageBox.show({
-
title:"所选ID列表",
- msg:ids
-
- })
- }
- }
-
},'-',{
- 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"
- %>
- <%
-
start=Request("start")
-
limit=Request("limit")
-
query=Request("query")
- Ifstart=""Then
- start=0
- EndIf
- Iflimit=""Then
- limit=50
- EndIf
-
sorts=Replace(Trim(Request.Form("sort")),"'","")
-
dir=Replace(Trim(Request.Form("dir")),"'","")
-
- Ifquery="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
- Dimcounts:counts=300
-
- DimLs:Ls=Cint(start)+Cint(limit)
- IfLs>=countsThen
- Ls=counts
- EndIf
-
-
Echo("{")
-
Echo("""total"":")
-
Echo(""""&counts&""",")
-
Echo("""items"":[")
- Fori=start+1ToLs
-
Echo("{")
-
Echo("""id"":"""&i&"""")
-
Echo(",")
-
Echo("""title"":""newstitle"&i&"""")
-
Echo(",")
-
Echo("""author"":""author"&i&"""")
-
Echo(",")
-
Echo("""hits"":"""&i&"""")
-
Echo(",")
-
Echo("""addtime"":"""&Now()&"""")
-
Echo("}")
-
Ifi<LsThen
-
Echo(",")
-
EndIf
- Next
-
-
Echo("]}")
- EndIf
- FunctionEcho(str)
- Response.Write(str)
- EndFunction
- %>
分享到:
相关推荐
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是...ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选, 附源码。 修复不能多选问题,代码仅供参考
ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记...
extjs-theme-bootstrap-master.zip
NULL 博文链接:https://lucky16.iteye.com/blog/1522254
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
Extjs4---grid的修改、删除功能---结合struts2、hibernate
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
ExtJs grid多选时获取选中的所有值,以及其他相关的操作
Extjs 5 学习笔记,在网上下载整理好的。
语言程序设计资料:ExtJs学习笔记-2积分.doc
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net
NULL 博文链接:https://hnhnhnhnhn.iteye.com/blog/1163427