HTML5定制全选列头

浏览数：28 / 时间：2015年06月09日

随着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>