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>

HTML5定制全选列头

猜你喜欢