您的位置: 首页  >  文章  >  ExtJS4学习笔记(十一)---Grid多选/全选

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

分类: 文章 • 2023-02-26 00:22:54

上一篇文章，在Grid中加入了搜索功能，但大量数据需要删除操作的时候，总不能一条一条去删除吧，本文介绍如何在Extjs4 Grid中加入全选功能。

先来张效果图：

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

点击显示所选后：

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

注意点：

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

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

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

正文：

html代码：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>Grid多选/全选-MHZG.NET</title>
  6. <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
  7. <styletype="text/css">
  8. #search-resultsa{
  9. color:#385F95;
  10. font:bold11pxtahoma,arial,helvetica,sans-serif;
  11. text-decoration:none;
  12. }
  13. .add{
  14. background-image:url(../../examples/shared/icons/fam/cog.gif)!important;
  15. }
  16. #search-resultsa:hover{
  17. text-decoration:underline;
  18. }
  20. #search-resultsp{
  21. margin:3px!important;
  22. }
  24. .search-item{
  25. font:normal11pxtahoma,arial,helvetica,sans-serif;
  26. padding:3px10px3px10px;
  27. border:1pxsolid#fff;
  28. border-bottom:1pxsolid#eeeeee;
  29. white-space:normal;
  30. color:#555;
  31. }
  32. .search-itemh3{
  33. display:block;
  34. font:inherit;
  35. font-weight:bold;
  36. color:#222;
  37. }

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

  61. <body>
  62. <divid="demo"></div>
  63. </body>
  64. </html>

selectgrid.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.ux.form.SearchField',
  9. 'Ext.selection.CheckboxModel'
  10. ]);

  12. Ext.onReady(function(){
  13. Ext.define('MyData',{
  14. extend:'Ext.data.Model',
  15. fields:[
  16. 'id','title','author',
  17. {name:'hits',type:'int'},
  18. 'addtime'
  19. ]
  20. });
  22. //创建数据源
  23. varstore=Ext.create('Ext.data.Store',{
  24. //分页大小
  25. pageSize:50,
  26. model:'MyData',
  27. //是否在服务端排序
  28. remoteSort:true,
  29. proxy:{
  30. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
  31. type:'ajax',
  32. url:'selectgrid.asp',
  34. reader:{
  35. root:'items',
  36. totalProperty:'total'
  37. },
  38. simpleSortMode:true
  39. },
  40. sorters:[{
  41. //排序字段。
  42. property:'hits',
  43. //排序类型，默认为ASC
  44. direction:'DESC'
  45. }]
  46. });
  48. //创建多选
  49. varselModel=Ext.create('Ext.selection.CheckboxModel');
  50. //创建Grid
  51. vargrid=Ext.create('Ext.grid.Panel',{
  52. store:store,
  53. selModel:selModel,
  54. columnLines:true,
  55. columns:[
  56. {text:"标题",width:120,dataIndex:'title',sortable:true},
  57. {text:"作者",width:140,dataIndex:'author',sortable:false},
  58. {text:"点击数",width:100,dataIndex:'hits',sortable:true},
  59. {text:"添加时间",width:150,dataIndex:'addtime',sortable:true}
  60. ],
  61. height:400,
  62. width:520,
  63. x:20,
  64. y:40,
  65. title:'ExtJS4SearchGrid-Grid搜索',
  67. disableSelection:false,//值为TRUE，表示禁止选择行
  68. frame:true,
  69. loadMask:true,
  70. renderTo:'demo',
  71. viewConfig:{
  72. id:'gv',
  73. trackOver:false,
  74. stripeRows:false
  75. },
  76. dockedItems:[{
  77. dock:'top',
  78. xtype:'toolbar',
  79. items:[{
  80. itemId:'Button',
  81. text:'显示所选',
  82. tooltip:'Addanewrow',
  83. iconCls:'add',
  84. handler:function(){
  85. varrecord=grid.getSelectionModel().getSelection();
  86. if(record.length==0){
  87. Ext.MessageBox.show({
  88. title:"提示",
  89. msg:"请先选择您要操作的行!"
  90. //icon:Ext.MessageBox.INFO
  91. })
  92. return;
  93. }else{
  94. varids="";
  95. for(vari=0;i<record.length;i++){
  96. ids+=record[i].get("id")
  97. if(i<record.length-1){
  98. ids=ids+",";
  99. }
  100. }
  101. Ext.MessageBox.show({
  102. title:"所选ID列表",
  103. msg:ids
  104. //icon:Ext.MessageBox.INFO
  105. })
  106. }
  107. }
  108. },'-',{
  109. width:300,
  110. fieldLabel:'搜索',
  111. labelWidth:50,
  112. xtype:'searchfield',
  113. store:store
  114. }]
  115. },{
  116. dock:'bottom',
  117. xtype:'pagingtoolbar',
  118. store:store,
  119. pageSize:25,
  120. displayInfo:true,
  121. displayMsg:'显示{0}-{1}条，共计{2}条',
  122. emptyMsg:'没有数据'
  123. }]
  125. })
  126. store.loadPage(1);
  127. })

服务端selectgrid.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的ORDERBY里即可。
  9. start=Request("start")
  10. limit=Request("limit")
  11. '查询时获取的参数。
  12. query=Request("query")
  13. Ifstart=""Then
  14. start=0
  15. EndIf
  16. Iflimit=""Then
  17. limit=50
  18. EndIf
  19. sorts=Replace(Trim(Request.Form("sort")),"'","")
  20. dir=Replace(Trim(Request.Form("dir")),"'","")

  22. '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
  23. Ifquery="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. Dimcounts:counts=300
  40. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。

  42. DimLs:Ls=Cint(start)+Cint(limit)
  43. IfLs>=countsThen
  44. Ls=counts
  45. EndIf

  47. Echo("{")
  48. Echo("""total"":")
  49. Echo(""""&counts&""",")
  50. Echo("""items"":[")
  51. Fori=start+1ToLs
  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. Ifi<LsThen
  64. Echo(",")
  65. EndIf
  66. Next

  68. Echo("]}")
  69. EndIf
  70. FunctionEcho(str)
  71. Response.Write(str)
  72. EndFunction
  73. %>

相关推荐