TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

HTML5定制全选列头

Posted on 2014-09-10 14:50 TWaver 阅读(3215) 评论(0)  编辑  收藏

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

1column.setValueType('boolean');

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

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


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

完整的代码实现见下方：

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>

只有注册用户登录后才能发表评论。
网站导航: