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);
}
这样的默认效果感觉还不是那么美观,我们用图片来替代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定制全选列头的更多相关文章
- Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- C#总结(三)DataGridView增加全选列
最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...
- DataGridView增加全选列
最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...
- GridControl 添加全选列
这里通过List对象绑定GridControl,且不用在GirdControl界面中添加任何列,实现CheckBox列的方法 1.列表中出现CheckBox列 非常简单,在绑定的List实体中,增加一 ...
- 实现DataGridView和DevExpress.GridControl表头全选功能
1)DevExpress控件的GridView的实现多选操作 先讲DevExpress控件的GridView的实现,要实现的功能基本上是处理单击全选操作.重新绘制表头等操作,首先在加载第一步实现相关的 ...
- 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能
首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...
- datagrid 绑定选中数据,列头全选
成品图: xaml代码 <Grid> <DataGrid x:Name="datagrid" Height="Auto" Width=&quo ...
- GridControl 选择列、复选框全选(上)
说明: GirdControl 中添加一列,这一列不是写在数据库中的,而是代码中添加的. 图示: 底层类代码: #region GridControl 全选 /// <summary> / ...
- Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色
上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...
随机推荐
- 抽象类(abstract class)和接口(interface)有什么异同?
相同点: 1.抽象类和接口都不能被实例化,但可以定义抽象类和接口类型的引用. 2.一个类如果继承了抽象类和接口,必须要对其中的抽象方法全部实现.(接口中方法默认的是public abstract修饰的 ...
- 获取特定html源码 富文本编辑器 爬虫生成 dom
python beautifulsoup获取特定html源码 - 吴悟无 - 博客园 https://www.cnblogs.com/vickey-wu/p/6843411.html PyQuery库 ...
- RK3288][Android6.0] 调试笔记 --- 关闭按键音后无法录音问题【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/70052413 Platform: ROCKCHIPOS: Android 6.0Kernel ...
- Email-ext plugin
https://wiki.jenkins.io/display/JENKINS/Email-ext+plugin General This plugin extends Jenkins built i ...
- 关于Flask的默认session
Flask的默认session利用了Werkzeug的SecureCookie,把信息做序列化(pickle)后编码(base64),放到cookie里了. 过期时间是通过cookie的过期时间实现的 ...
- bzoj3670 [Noi2014]动物园——KMP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3670 第一次写KMP算法...又T又WA了半天... 1. num 数组表示包括其本身的前缀 ...
- 杂项-Java:Tomcat
ylbtech-杂项-Java:Tomcat 1.返回顶部 1. Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目, ...
- bzoj2558
哈希+拓扑排序 题意比较绕,先开始没看懂就看了发程序,发现好像理解的不太一样,后来找到了一个题目解释... 摘自jcvb:其实就是说颜色相同且三个出口分别对应相同(注意有可能是合并后才相同)两个结点是 ...
- 倒计时,短信发送后倒计时效果js
<div class="input-group-addon"><a style="width: 100%;height: 100%" href ...
- K Seq HihoCoder - 1046 || BZOJ4504 k个串
这题与超级钢琴类似,然而重复的不重复计算贡献.. 那么先求出数组nxt,nxt[i]表示第i个元素之后的第一个与其相等的元素的下标,不存在则nxt[i]=0 考虑取的区间左端点为1时的情况. 将读入序 ...