HTML5定制全选列头

最新推荐文章于 2021-06-11 13:20:06 发布

原创最新推荐文章于 2021-06-11 13:20:06 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #TWaver 3D #TWaver HTML5

TWaver HTML5 同时被 2 个专栏收录

32 篇文章

订阅专栏

MONO Design

16 篇文章

订阅专栏

本文介绍如何在HTML5表格中实现全选功能，包括表头和表格body部分的勾选逻辑。通过使用TWaver库，展示了如何利用checkbox元素及自定义渲染函数完成这一功能。

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

    4checkbox.onclick = function(e){

    5 var 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>

<meta charset="utf-8"> 

    3<html>

    4<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'; 

        } 

    29 

        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); 

            } 

        } 

    53 

        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); 

        } 

    70 

        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); 

            } 

        } 

    79 

        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> 

    93</head>

<body onload="init()" style="margin:0;"> 

    95</body>

    96</html>