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

}

 

HTML5定制全选列头
这样的默认效果感觉还不是那么美观,我们用图片来替代checkbox也可以达到同样的效果,再来看看这张图,感觉是不是好看了一点。

HTML5定制全选列头

完整的代码实现见下方:

<!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>

 

你可能感兴趣的:(html5)