HTML5定制全选列头

随着HTML5产品分支的不断深入使用,HTML5的需求也是越来越多,表格组件的使用也不例外,什么排序,分页,自动列宽等。最近有客户提出了如果让表格的列头加上全选的功能。细细分析其实就是两部分,表格的body部分是勾选的列,表头也绘制成勾选的列。
对于表格body部分的勾选,最简单是应用TWaver默认的boolean类型的render,方法很简单,只要在创建表格列时设置下面的语句就行:

1 column.setValueType('boolean');

主要就是绘制表头的render,表头的render设置也是很easy,我们只要在表头的div中加上checkbox,然后再给checkbox加上动作,如果勾选上,就让这一列所有的数据都为true,反之亦然。代码如下:

1 var checkbox = document.createElement('input');
2 checkbox.setAttribute("type","checkbox");
3 checkbox.checked = true;
4 checkbox.onclick = function(e){
5 var checked = this.checked;
6 column.checked = checked;
7 databox.forEach(function(element){
8     element.setClient("nVisible",checked);
9 });
10 }
11 column.renderHeader = function(div){
12     div.style.textAlign = 'center';
13     div.appendChild(checkbox);
14 }

HTML5定制全选列头
这样的默认效果感觉还不是那么美观,我们用图片来替代checkbox也可以达到同样的效果,再来看看这张图,感觉是不是好看了一点。

HTML5定制全选列头

完整的代码实现见下方:

1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <html>
4 <head>
5     <title>Custom Table</title>
6     <style>
7         .visible-header{background:url(checkeye.png) 0px 0px; border:none; width: 12px; height: 7px; cursor: pointer;}
8         .unVisible-header{background:url(checkeye.png) -17px 0px;}
9     </style>
10     <script type="text/javascript" src="twaver.js"></script>
11     <script type="text/javascript">
12         function init() {
13             var box = new twaver.ElementBox();
14             initDataBox(box);
15             var table = new twaver.controls.Table(box);
16             table.setEditable(true);
17             var tablePane = new twaver.controls.TablePane(table);
18             var visibleColumn = createColumn(table, 'Visible''nVisible','client''boolean'30);
19             createColumn(table, 'Id''id''accessor''string',300);
20             createColumn(table, 'Name''name''accessor''string',70);
21             renderHeaderCheckBox(visibleColumn,box);
22             visibleColumn.renderCell = function(cell){renderCellCheckbox(cell)};
23             document.body.appendChild(tablePane.getView());
24             tablePane.getView().style.left = '50px';
25             tablePane.getView().style.top = '50px';
26             tablePane.getView().style.width = '400px';
27             tablePane.getView().style.height = '800px';
28         }
29  
30         function renderHeaderCheckBox(column,databox){
31             var checkbox = document.createElement('input');
32             checkbox.setAttribute("type","button");
33             checkbox.setAttribute("class","visible-header");
34             checkbox.checked = true;
35             checkbox.onclick = function(e){
36                 var checked = this.checked;
37                 column.checked = checked;
38                 if(checked){
39                     checkbox.setAttribute("class","visible-header");
40                 }else{
41                     checkbox.setAttribute("class","visible-header unVisible-header");
42                 }
43                 this.checked = !this.checked;
44                 databox.forEach(function(element){
45                     element.setClient("nVisible",checked);
46                 });
47             }
48             column.renderHeader = function(div){
49                 div.style.textAlign = 'center';
50                 div.appendChild(checkbox);
51             }
52         }
53  
54         function renderCellCheckbox(cell){
55                 var checkbox = document.createElement('input');
56                 checkbox.setAttribute("type","button");
57                 var checked = cell.data.getClient("nVisible");
58                 if(checked){
59                     checkbox.setAttribute("class","visible-header");
60                 }else{
61                     checkbox.setAttribute("class","visible-header unVisible-header");
62                 }
63                 checkbox.onclick = function(e){
64                     var checked = cell.data.getClient("nVisible");
65                     cell.data.setClient("nVisible",!checked);
66                 }
67                 cell.div.style.textAlign = 'center';
68                 cell.div.appendChild(checkbox);
69         }
70  
71         function initDataBox(box){
72             for(var i = 0; i < 10; i++){
73                 var node = new twaver.Node();
74                 node.setName("node"+i);
75                 node.setClient('nVisible',true);
76                 box.add(node);
77             }
78         }
79  
80         function createColumn(table, name, propertyName, propertyType, valueType, width) {
81             var column = new twaver.Column(name);
82             column.setName(name);
83             column.setPropertyName(propertyName);
84             column.setPropertyType(propertyType);
85             if (valueType) column.setValueType(valueType);
86             if(width) column.setWidth(width);
87             column.setEditable(true);
88             column.setSortable(false);
89             table.getColumnBox().add(column);
90             return column;
91         }
92     </script>
93 </head>
94 <body onload="init()" style="margin:0;">
95 </body>
96 </html>

你可能感兴趣的:(html5,html5,3D,TWaver,TWaver)