标签：html5 twaver html5 twaver 3d
随着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 |
} |
这样的默认效果感觉还不是那么美观，我们用图片来替代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> |
标签：html5 twaver html5 twaver 3d
原文地址：http://blog.csdn.net/twaver/article/details/39181065
