HTML5定制全选列头
随着HTML5产品分支的不断深入使用，HTML5的需求也是越来越多，表格组件的使用也不例外，什么排序，分页，自动列宽等。最近有客户提出了如果让表格的列头加上全选的功能。细细分析其实就是两部分，表格的body部分是勾选的列，表头也绘制成勾选的列。
对于表格body部分的勾选，最简单是应用TWaver默认的boolean类型的render，方法很简单，只要在创建表格列时设置下面的语句就行：
column.setValueType('boolean');
主要就是绘制表头的render，表头的render设置也是很easy，我们只要在表头的div中加上checkbox，然后再给checkbox加上动作，如果勾选上，就让这一列所有的数据都为true，反之亦然。代码如下：
var checkbox = document.createElement('input');
checkbox.setAttribute("type","checkbox");
checkbox.checked = true;
checkbox.onclick = function(e){
var checked = this.checked;
column.checked = checked;
databox.forEach(function(element){
element.setClient("nVisible",checked);
});
}
column.renderHeader = function(div){
div.style.textAlign = 'center';
div.appendChild(checkbox);
}
这样的默认效果感觉还不是那么美观，我们用图片来替代checkbox也可以达到同样的效果，再来看看这张图，感觉是不是好看了一点。
完整的代码实现见下方：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Custom Table</title>
<style>
.visible-header{background:url(checkeye.png) 0px 0px; border:none; width: 12px; height: 7px; cursor: pointer;}
.unVisible-header{background:url(checkeye.png) -17px 0px;}
</style>
<script type="text/javascript" src="twaver.js"></script>
<script type="text/javascript">
function init() {
var box = new twaver.ElementBox();
initDataBox(box);
var table = new twaver.controls.Table(box);
table.setEditable(true);
var tablePane = new twaver.controls.TablePane(table);
var visibleColumn = createColumn(table, 'Visible', 'nVisible', 'client', 'boolean', 30);
createColumn(table, 'Id', 'id', 'accessor', 'string',300);
createColumn(table, 'Name', 'name', 'accessor', 'string',70);
renderHeaderCheckBox(visibleColumn,box);
visibleColumn.renderCell = function(cell){renderCellCheckbox(cell)};
document.body.appendChild(tablePane.getView());
tablePane.getView().style.left = '50px';
tablePane.getView().style.top = '50px';
tablePane.getView().style.width = '400px';
tablePane.getView().style.height = '800px';
}
function renderHeaderCheckBox(column,databox){
var checkbox = document.createElement('input');
checkbox.setAttribute("type","button");
checkbox.setAttribute("class","visible-header");
checkbox.checked = true;
checkbox.onclick = function(e){
var checked = this.checked;
column.checked = checked;
if(checked){
checkbox.setAttribute("class","visible-header");
}else{
checkbox.setAttribute("class","visible-header unVisible-header");
}
this.checked = !this.checked;
databox.forEach(function(element){
element.setClient("nVisible",checked);
});
}
column.renderHeader = function(div){
div.style.textAlign = 'center';
div.appendChild(checkbox);
}
}
function renderCellCheckbox(cell){
var checkbox = document.createElement('input');
checkbox.setAttribute("type","button");
var checked = cell.data.getClient("nVisible");
if(checked){
checkbox.setAttribute("class","visible-header");
}else{
checkbox.setAttribute("class","visible-header unVisible-header");
}
checkbox.onclick = function(e){
var checked = cell.data.getClient("nVisible");
cell.data.setClient("nVisible",!checked);
}
cell.div.style.textAlign = 'center';
cell.div.appendChild(checkbox);
}
function initDataBox(box){
for(var i = 0; i < 10; i++){
var node = new twaver.Node();
node.setName("node"+i);
node.setClient('nVisible',true);
box.add(node);
}
}
function createColumn(table, name, propertyName, propertyType, valueType, width) {
var column = new twaver.Column(name);
column.setName(name);
column.setPropertyName(propertyName);
column.setPropertyType(propertyType);
if (valueType) column.setValueType(valueType);
if(width) column.setWidth(width);
column.setEditable(true);
column.setSortable(false);
table.getColumnBox().add(column);
return column;
}
</script>
</head>
<body onload="init()" style="margin:0;">
</body>
</html>
