View unanswered posts | View active topics It is currently 2021-04-21 9:26



Reply to topic  [ 1 post ] 
 table通过checkbox实现全选和全不选 
Author Message
TWaver开发组
User avatar

Joined: 2017-06-05 10:42
Posts: 45
Post table通过checkbox实现全选和全不选
Code:
var box = new twaver.ElementBox();
   var network = new twaver.vector.Network(box);
   var table = new twaver.controls.Table(box);
   var div = document.createElement('div');
   var autoLayouter = new twaver.layout.AutoLayouter(box);

   function init(){
      var tablePane = new twaver.controls.BorderPane(new twaver.controls.TablePane(table),null,null,div);
      tablePane.setBottomHeight(25);
      var pane = new twaver.controls.SplitPane(network,tablePane,'vertical',0.7);
      var view = pane.getView();
      view.style.left='0px';
      view.style.top='0px';
      view.style.right='0px';
      view.style.bottom='0px';
      document.body.appendChild(view);

      var button = document.createElement('button');
      button.innerText = 'showNodeList';
      button.style.marginLeft='10px';
      button.addEventListener('click',showNodeList,false);
      div.appendChild(button);

      initTable();
      initDataBox();
   }

   function initTable(){
      table.setCheckMode(true);
      var tableBox = table.getDataBox();
      var checkColumn = table.getCheckColumn();//获取checkbox列
      checkColumn.setSortable(false);//设置默认排序事件
      checkColumn.renderHeader = function(div){
         var checkbox = document.createElement('input');
         checkbox.setAttribute('type','checkbox');
         div.appendChild(checkbox);
         checkbox.addEventListener('click',function(){
            var sm = box.getSelectionModel();//获取数据容器的选中容器
            if(checkbox.checked){
               sm.appendSelection(box.getDatas());//全选
            }else{
               sm.clearSelection();//清空
            }
         },false)
      }
      createColumn(table,'Id','id','accessor','string');
      createColumn(table,'Name','name','accessor','string');
   }

   function createColumn(table,name,propertyName,propertyType,valueType,editable){
      var column = new twaver.Column(name);
      column.setName(name);
      column.setPropertyName(propertyName);
      column.setPropertyType(propertyType);
      if(valueType){
         column.setValueType(valueType);
      }
      column.setEditable(editable);
      column.renderHeader=function(div){
         var span = document.createElement('span');
         span.style.whiteSpace = 'nowrap';
         span.style.verticalAlign='middle';
         span.style.padding='1px 2px';
         span.innerHTML = column.getName() ? column.getName() : column.getPropertyName();
         span.setAttribute('title',span.innerHTML);
         span.style.font = 'bold 12px Helvetica';
         div.style.textAlign='center';
         div.appendChild(span);
      }
      table.getColumnBox().add(column);
      return column;
   }

   function initDataBox(){
      var node = new twaver.Node({name:'node'});
      box.add(node);
      for(var i = 0; i < Math.random()*10+5;i++){
         var node1 = new twaver.Node({name:'node'+i});
         var link = new twaver.Link(node,node1);
         box.add(node1);
         box.add(link);
      }
      autoLayouter.doLayout('topbottom');
   }

   function showNodeList(){
      console.log(box.getSelectionModel().getSelection());//打印选中的数据
   }


2017-06-28 11:32
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 12 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to: