HTML5定制全选列头

随着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;
4 checkbox.onclick
= function(e){
5 var
checked = this.checked;
6 column.checked
= checked;
7 databox.forEach(function(element){
8     element.setClient("nVisible",checked);
9 });
10 }
11 column.renderHeader
= function(div){
12     div.style.textAlign
= ‘center‘;
13     div.appendChild(checkbox);
14 }

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

完整的代码实现见下方：

1 <!DOCTYPE
html>
2 <meta
charset="utf-8">
3 <html>
4 <head>
5     <title>Custom
Table</title>
6     <style>
7         .visible-header{background:url(checkeye.png)
0px 0px; border:none; width: 12px; height: 7px; cursor: pointer;}
8         .unVisible-header{background:url(checkeye.png)
-17px 0px;}
9     </style>
10     <script
type="text/javascript" src="twaver.js"></script>
11     <script
type="text/javascript">
12         function
init() {
13             var
box = new twaver.ElementBox();
14             initDataBox(box);
15             var
table = new twaver.controls.Table(box);
16             table.setEditable(true);
17             var
tablePane = new twaver.controls.TablePane(table);
18             var
visibleColumn = createColumn(table, ‘Visible‘, ‘nVisible‘,‘client‘, ‘boolean‘, 30);
19             createColumn(table, ‘Id‘, ‘id‘, ‘accessor‘, ‘string‘,300);
20             createColumn(table, ‘Name‘, ‘name‘, ‘accessor‘, ‘string‘,70);
21             renderHeaderCheckBox(visibleColumn,box);
22             visibleColumn.renderCell
= function(cell){renderCellCheckbox(cell)};
23             document.body.appendChild(tablePane.getView());
24             tablePane.getView().style.left
= ‘50px‘;
25             tablePane.getView().style.top
= ‘50px‘;
26             tablePane.getView().style.width
= ‘400px‘;
27             tablePane.getView().style.height
= ‘800px‘;
28         }
29  
30         function
renderHeaderCheckBox(column,databox){
31             var
checkbox = document.createElement(‘input‘);
32             checkbox.setAttribute("type","button");
33             checkbox.setAttribute("class","visible-header");
34             checkbox.checked
= true;
35             checkbox.onclick
= function(e){
36                 var
checked = this.checked;
37                 column.checked
= checked;
38                 if(checked){
39                     checkbox.setAttribute("class","visible-header");
40                 }else{
41                     checkbox.setAttribute("class","visible-header
unVisible-header");
42                 }
43                 this.checked
= !this.checked;
44                 databox.forEach(function(element){
45                     element.setClient("nVisible",checked);
46                 });
47             }
48             column.renderHeader
= function(div){
49                 div.style.textAlign
= ‘center‘;
50                 div.appendChild(checkbox);
51             }
52         }
53  
54         function
renderCellCheckbox(cell){
55                 var
checkbox = document.createElement(‘input‘);
56                 checkbox.setAttribute("type","button");
57                 var
checked = cell.data.getClient("nVisible");
58                 if(checked){
59                     checkbox.setAttribute("class","visible-header");
60                 }else{
61                     checkbox.setAttribute("class","visible-header
unVisible-header");
62                 }
63                 checkbox.onclick
= function(e){
64                     var
checked = cell.data.getClient("nVisible");
65                     cell.data.setClient("nVisible",!checked);
66                 }
67                 cell.div.style.textAlign
= ‘center‘;
68                 cell.div.appendChild(checkbox);
69         }
70  
71         function
initDataBox(box){
72             for(var
i = 0;
i < 10;
i++){
73                 var
node = new twaver.Node();
74                 node.setName("node"+i);
75                 node.setClient(‘nVisible‘,true);
76                 box.add(node);
77             }
78         }
79  
80         function
createColumn(table, name, propertyName, propertyType, valueType, width) {
81             var
column = new twaver.Column(name);
82             column.setName(name);
83             column.setPropertyName(propertyName);
84             column.setPropertyType(propertyType);
85             if (valueType)
column.setValueType(valueType);
86             if(width)
column.setWidth(width);
87             column.setEditable(true);
88             column.setSortable(false);
89             table.getColumnBox().add(column);
90             return column;
91         }
92     </script>
93 </head>
94 <body
onload="init()" style="margin:0;">
95 </body>
96 </html>
时间： 2024-11-05 15:59:27

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

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

最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是需要提供全选反选功能,2. 再加一个checkbox控件跟datagridview组合来实现全选反选功能.但是,感觉这两种实现效果都不是很好.网上查资料,发现一个老外的实现方法,比较简单通用.demo 代码最下面的连接给出. 他的实现方式就是:DataGridViewCheckBoxColumn的父

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

1)DevExpress控件的GridView的实现多选操作 先讲DevExpress控件的GridView的实现,要实现的功能基本上是处理单击全选操作.重新绘制表头等操作,首先在加载第一步实现相关的事件和操作,如下所示. this.gridView1.Click += new System.EventHandler(this.gridView1_Click);  this.gridView1.CustomDrawColumnHeader += new DevExpress.XtraGrid.V

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

首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. 1 public partial class Form1 : Form 2 { 3 public Form1() 4 { 5 InitializeComponent(); 6 } 7 8 private Rectangle checkBoxColumnHeaderRect = Rectangle.Empty; 9 private GridColumn checkBoxColumn = null; 10 privat

GridControl实现多选和列头全选

大名鼎鼎的DEV啊……弄了一个gridControl结果不知道如何加选择列,还有表头全选上网搜了搜终于搜到解决方案……结果解决办法麻烦的要死…… 这么一个挺基础的需求,DEV不提供解决方案?这没道理吧?怎么办啊……就差这一个功能了……换控件不划算啊 有这么一个方法来完成(只适合winform): 1.     绑定数据的源表添加一列      DataTable dt = ds.Tables[0]; dt.Columns.Add("selected", System.Type.GetT

GridControl 选择列、复选框全选

说明: GirdControl 中添加一列,这一列不是写在数据库中的,而是代码中添加的. 图示: 底层类代码: #region GridControl 全选 /// <summary> /// 是否选中 /// </summary> private static bool chkState = false; //复选框列名称 private static string chkFileName = ""; //复选框列宽 private static int ch

移动端html5页面长按实现高亮全选文本内容的兼容解决方案

最近需要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单,用户可以点击"复制"进行复制操作,然后粘贴到AppStore搜索对应的应用.之所以不是采用链接形式直接跳转到AppStore对应应用是为了通过用户的主动输入关键词搜索给推广的企业App增加权重.所以这一个"复制"功能对用户的体验至关重要. 尝试了一些做法,在安卓/iOS平台上的兼容性都不是很好.在微信浏览器内是很容易实现长按文本激发系统菜

DEV PivotGridControl 全选行或列

foreach (string item in fieldProductName.FilterValues.Values) { pivotGridControl.Cells.SetSelectionByFieldValues(false, new object[] { item}); } fieldProductName 为行名称 即设置的pivotGridField DEV PivotGridControl 全选行或列,布布扣,bubuko.com

html5与js关于input[type=&#39;text&#39;]文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick=&quot;select();&quot;。做购物车页面时会要用到。

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();".做购物车页面时会要用到. input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange: 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次

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

上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数可以多选或全选:动态地显示列,列不是固定的:根据某一字段的值来动态地显示整行字体的颜色. 下面介绍详细的方法: 一.动态参数.参数多选全选 动态参数: 首先定义一个Dataset: SELECT DISTINCT new_countryId, new_codename AS name FROM ne