为 Dojo Enhanced Grid 加上 checkBox （1）

look_w

这里提供了一种方法，可以让 Enhanced Grid 很自然的增加 checkBox 这一列，在勾选表头那一列的 checkBox 时，表身的所有 checkBox 都被选中；勾选中表身的所有 checkBox 时，表头的 checkBox 也会被很自然地选中。读者通过阅读这篇文章，既可以学到有关如何在 Dojo Enhanced Grid 中使用 checkBox 相关功能，又可以对 Enhanced Grid 的特性有所了解，能更加熟练地应用 Dojo 的这个控件。               
读者需要提前了解的内容读者在阅读本文前需提前了解一些关于 Dojo DataGrid 的背景知识或具有一定的前端开发经验和 Dojo 的使用经验。
Dojox.grid.Enhanced Grid 简介及使用场景这里将对 Dojox 库里的 Enhanced Grid 做一个简单的介绍。Dojox.Grid.Enhanced Grid 是基于 Dojo 开发前端页面经常用到的一个控件。其使用场景有很多，如生成报表、分页显示和对记录进行排序等。尤其是还可以按照用户的需求对表中内容及其显示的样式进行定制。
Enhanced Grid 较之普通的 DataGrid 有更多优秀的特性，这些特性大多是通过插件的方式提供给用户的。采用插件方式的好处在于可以给用户提供选择的机会，用户可以根据自己的需要来添加或删除插件。比较有名的几个插件有，IndirectSelection（行首提供选择框）、NestedSorting（多列排序）、Pagination（分页）和 Cell Merge（对一行里的几个单元格进行合并）等。除了可以增减插件，Enhanced Grid 也具有一般的 DataGrid 所具有的一些属性，如 structure、rowsPerPage 和 store 等。其中，structure 可以控制 grid 的整体布局。显然，可以通过这一属性来为 Enhanced Grid 添加和删除一列，并且改变某列的样式，它的具体用法将在后文中介绍。
为什么要为 Enhanced Grid 加上 checkBox 列  Enhanced Grid 是很典型的列表控件，在大多数情况下，列表不但要展现出丰富的内容，同样要允许用户对列表的某一行进行勾选或者删除。尤其是在某些场合，比如邮件的垃圾箱，用户通常是简单地点击表头的 checkBox 以选中整张表的所有项以全部删除垃圾箱中的邮件。对于 Enhanced Grid 本身而言，它并没有提供现成的行首 checkBox 列。下面将介绍三种为该控件添加行首 checkBox 列的方法，其中前两种是现有比较常见的两种方法，第三种则是笔者结合前两种的不足进行的改进。
现有的两类为 Dojo Enhanced Grid 添加 checkBox 列的方法通过 IndirectSelection 插件添加 checkBox 列IndirectSelection 的行选择支持两种基本控件，radioButton 和 checkBox, 支持哪种控件依赖于 Enhanced Grid 的属性 selectionMode。radioButton 适用于 single mode，而 checkBox 适用于 extended mode，而“extended”是 selectionMode 的默认值。
下面的两行 JavaScript 语句分别说明了如何使用 IndirectSelection 插件为 Enhanced Grid 添加 radioButton 列和 checkBox 列。
清单 1. 使用 IndirectSelection 插件为 Enhanced Grid 添加 radioButton 列和 checkBox 列

1 2 3 4

var grid = new dojox.grid.Enhanced Grid({id:“id1”,plugins: {indirectSeletion: ture}, … }, dojo.byId('gridDiv')); var grid = new dojox.grid.Enhanced Grid({id:“id2”,plugins: {indirectSeletion: ture}, selectionMode: single, … }, dojo.byId('gridDiv'));

对于 radioButton 来说，无需提供表头的全选框，因为这没有任何意义；而对于 checkBox 来说，很有必要提供全选框，因为用户在很多时候需要一下勾选上所有要选择的行，而不是逐个去点击。
图 1.IndirectSeletion用 structure 属性添加 checkBox 列前文提到 structure 属性可以用来控制整个 Enhanced Grid 的布局和样式，那么我们可以通过这个属性来为 Enhanced Grid 添加 checkBox 列。示例如下：
清单 2. JavaScript code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

1 var gridCells = [{ 2 type: "dojox.grid._CheckBoxSelector"}, 3   {cells: [[ 4      { 5      name: "columnName1", 6      field: "fieldName1", 7      width: "100px", 8      editable: true, 9      formatter: columnFormatter1 10     }, 11    { 12    name: "columnName2", 13    field: "fieldName2", 14    width: "100px", 15    editable: false, 16    formatter: columnFormatter2 17   } 18 ]]}];

清单 3. HTML markup

1 2 3

1 <div id="sampleGrid" dojoType="dojox.grid.Enhanced Grid 2 noDataMessage=”There is no record.” structure="gridCells" 3 clientSort="true" style="height:300px"> </div>

即通过设置 structure 属性的 type 值为 dojox.grid._CheckBoxSelector 来达到在行首添加 checkBox 的效果。这种方式相较于 IndirectSelection 插件的优势在于其具有全选框，但是其行首的 checkBoxSelector 的 style 与同行的其他列并不一致。
图 2.CheckBoxSelector：