首页 > 代码库 > HTML5定制全选列头
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="http://www.mamicode.com/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 onl oad="init()" style="margin:0;"></body></html>
HTML5定制全选列头
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。