为 Dojo Enhanced Grid 加上 checkBox （2）
|
- UID
- 1066743
|
为 Dojo Enhanced Grid 加上 checkBox （2）
一种两全其美的方法上述两种方法都有各自缺点，IndirectSelection 不能支持全选操作，而 CheckBoxSelector 的风格又和整张表的风格不太一致。下面介绍的这种方法可以做到二者兼顾。
清单 4. JavaScript code1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| 1 // 记录被选行 Id 的数组
2 var selectedIds = new Array();
3 // 控制全选框被点击行为
4 function globalSelection() {
5 var chks = document.getElementsByName(“gridId.subCheckBox”);
6 var topChk = dojo.byId(“gridId.checkBox”);
7 if (topChk.checked == true) {
8 for (var i = 0; i < chks.length; i++) {
9 // 当全选框被选中时，控制表身每行行首复选框行为，没有被选上的都被点击一次
10 if (chks.checked == false) {
11 chks.click();
12 }
13 }
14 } else {
15// 当全选框选中状态消失时，清楚数组中所有记录，清除所有表身行首复选框被选中状态
16 selectedIds.splice(0, selectedIds.length);
17 for (var i = 0; i < chks.length; i++) {
18 chks.checked = false;
19 }
20 }
21 }
22 // 控制每行行首复选框被点击行为
23 function recordSelections(value, node) {
24 // 首先确定全选框是否该被选中，如果表身的所有行首复选框都被选中，则全选框被选中，否则全选框被 25
// 设置为非选中状态
26 var count1 = dojo.query('input:checked', 'formId').length;
27 if (dojo.byId("gridId.checkBox ").checked == true) {
28 count1 = count1 - 1;
29 }
30 var count2 = document.getElementsByName("gridId.subCheckBox").length;
31 var topChk = dojo.byId("gridId.checkBox");
32 if (count1 == count2) {
33 topChk.checked = true;
34 } else {
35 topChk.checked = false;
36 }
37 // 维护全局数组，如果该复选框所在的行被选中，则记录该行 Id，否则从数组中清除
38 if (node.checked == true) {
39 selectedIds.push(value);
40 } else {
41 for (var i = 0; i < selectedIds.length; i++) {
42 if (selectedIds == value) {
43 selectedIds.splice(i, 1);
44 }
45 }
46 }
47 }
48 // 使 Enhanced Grid 首列为 checkBox 列的 formatter
49 function checkBoxFormatter(value) {
50 return "<div><input type='checkBox' name='gridId.subCheckBox '
51 onclick=\"recordSelections(" + value + ", this)\"/></div>";
52 }
|
清单 5. HTML markup1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 1 <form id="formId" dojoType="dijit.form.Form">
2 <table id="gridId" dojoType="dojox.grid.Enhanced Grid" autoHeight="true">
3 <thead>
4 <tr>
5 <th width="10%" field="rowId" styles="text-align:center;"
6 formatter="checkBoxFormatter" sortable="false">
7 <div>
8 <input type="checkBox" id="gridId.checkBox" name="gridId.checkBox"
9 onclick="globalSelection();"/>
10 </div>
11 </th>
12 <th width="45%" field="field1" styles="text-align:left;">
13 <div>fieldName1</div>
14 </th>
15 <th width="45%" field="field2" styles="text-align:left;">
16 <div>fieldName2</div>
17 </th>
18 </tr>
19 </thead>
20 </table>
21 </form>
|
这种方法通过显示地为 Enhanced Grid 添加一列，并将其格式化为 checkBox（函数 checkBoxFormatter保证了这一点），从而使这一列看起来与其他列并没有太大区别，从而保证风格上的统一。再者，为了保证表头的全选框和各行行首的复选框行为的正确，分别为全选框 formId 的 onclick 事件绑定 globalSelection 函数和各行首复选框的 onclick 事件绑定 recordSelections 函数。其核心思想是维护一个记录每行 identity 的数组（因为通过 Dojo 提供的 dijit.byId(“formId”).store._getItemByIdentity 方法可以得到整行），数组中的元素就是当前被选中行的 identity，为了确保这一点，必须先将 checkBox 列的 field 值设为 rowId，即该行的 identifier。同时，这两个函数还保证了所有复选框在 UI 上显示的正确性。例如，当全选框被点击时，各行复选框都被选中；当各行复选框都被选中时，全选框被自然选中；在所有复选框都被选中时，勾除表身某行复选框的选中状态后，全选框的选中状态也会消失。
图 3.两全其美的效果 |
|
|
|
|
|
