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

HTML5定制全选列头的更多相关文章

  1. Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群

    Redis总结(五)缓存雪崩和缓存穿透等问题   前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...

  2. C#总结（三）DataGridView增加全选列

    最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...

  3. DataGridView增加全选列

    最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...

  4. GridControl 添加全选列

    这里通过List对象绑定GridControl,且不用在GirdControl界面中添加任何列,实现CheckBox列的方法 1.列表中出现CheckBox列 非常简单,在绑定的List实体中,增加一 ...

  5. 实现DataGridView和DevExpress.GridControl表头全选功能

    1)DevExpress控件的GridView的实现多选操作 先讲DevExpress控件的GridView的实现,要实现的功能基本上是处理单击全选操作.重新绘制表头等操作,首先在加载第一步实现相关的 ...

  6. 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能

    首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...

  7. datagrid 绑定选中数据，列头全选

    成品图: xaml代码 <Grid> <DataGrid x:Name="datagrid" Height="Auto" Width=&quo ...

  8. GridControl 选择列、复选框全选（上）

    说明: GirdControl 中添加一列,这一列不是写在数据库中的,而是代码中添加的. 图示: 底层类代码: #region GridControl 全选 /// <summary> / ...

  9. Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

随机推荐

  1. sqlserver新加一自增长的列,并且更新为行号

    --查询行号 select row_number()over(order by CHECKTIME )as RowNum,*from CHECKINOUT --更新id列为行号 update CHEC ...

  2. 短链接及关键字过滤ac自动机设计思路

    =============:短链接设计思路:核心:将长字符转为短字符串并建立映射关系,存储redis中.1.使用crc32转换为Long 2.hashids将long encode为最短字符串.作为短 ...

  3. composer查看安装情况

    composer install --no-progress --profile -vvv

  4. FFT学习及简单应用(一点点详细)

    什么是FFT 既然打开了这篇博客,大家肯定都已经对FFT(Fast Fourier Transformation)有一点点了解了吧 FFT即为快速傅里叶变换,可以快速求卷积(当然不止这一些应用,但是我 ...

  5. ACM_发工资（简单贪心）

    发工资咯: Time Limit: 2000/1000ms (Java/Others) Problem Description: 作为广财大的老师,最盼望的日子就是每月的8号了,因为这一天是发工资的日 ...

  6. 374 Guess Number Higher or Lower 猜数字大小

    我们正在玩一个猜数字游戏. 游戏规则如下:我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字.每次你猜错了,我会告诉你这个数字是大了还是小了.你调用一个预先定义好的接口 guess(int n ...

  7. 分布式爬虫系统设计、实现与实战：爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储

    http://blog.51cto.com/xpleaf/2093952 1 概述 在不用爬虫框架的情况,经过多方学习,尝试实现了一个分布式爬虫系统,并且可以将数据保存到不同地方,类似MySQL.HB ...

  8. 25 C#类的继承

    继承是面向对象编程的一个重要特性.任何类都可以从另一个类中继承,这就是说,这个类拥有它继承的类的所有成员.在OOP 中,被继承的类称为父类(也称为基类).注意,C#中的对象仅能直接派生于一个基类,当然 ...

  9. [ NOI 2002 ] Robot

    \(\\\) Description \(\\\) Solution 垃圾语文题毁我青春 这题其实就是重定义了俩函数.... 首先 \(\varphi(1)=0\) . 然后 \(2\) 在计算 \( ...

  10. 判断IE浏览器的类型以及提示信息（低版本浏览器不予显示）

    //浏览器IE版本判断(function(window) {    var theUA = window.navigator.userAgent.toLowerCase();    if ((theU ...