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

}

这样的默认效果感觉还不是那么美观，我们用图片来替代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>