React使用antd Table生成层级多选组件

v一、需求

　　用户对不同的应用需要有不同的权限，用户一般和角色关联在一起，新建角色的时候会选择该角色对应的应用，然后对应用分配权限。于是写了一种实现的方式。首先应用是一个二级树，一级表示的是应用分组，二级表示的是应用，这是table的最左边的数据。然后是按钮的数据，这里显示在table的头部。

v二、效果图如下

　　

v 三、具体代码

v　　1.RoleApplicationTable.js

  View Code

　　利用antd table实现层级多选组件。

　　具体思路：

addDataPid(btnGroupColumns, appData) {//生成新的列， 并且为非表头的每一个单元格设置固定 id，（防止表格渲染时 id发生变化）
  if(!appData) return;
  for(var i=0; i<appData.length; ++i) {
    for(var j=0; j<btnGroupColumns.length; ++j) {
      if(!appData[i][btnGroupColumns[j].colname]) {
        appData[i][btnGroupColumns[j].colname] = btnGroupColumns[j].id + '_' + (++this.cid);//为这一行数据添加新的列

        //判断应用对应的按钮是否已经选择上, judgeDefaultChecked
        
        if(appData[i].select && appData[i].select[btnGroupColumns[j].id]) {//btnGroupColumns[j].id == btnGroupId
          this.checkboxIdMapState.put(this.cid, true);
        } else {
          this.checkboxIdMapState.put(this.cid, false);
        }
      } else if(btnGroupColumns[j].colname == 'name'){
        if(appData[i][btnGroupColumns[j].colname].indexOf('_') >= 0) continue;
        appData[i][btnGroupColumns[j].colname] += '_' + (++this.cid);
        this.checkboxIdMapState.put(this.cid, false);
      }
    }
    this.addDataPid(btnGroupColumns, appData[i].children);
  }
}

addColName(btnGroupColumns, appData){//为每一列添加 映射字段 colname
  if(btnGroupColumns) {
    btnGroupColumns.map((elem, index)=> { 
      if(!elem.colname) {
        elem.colname = elem.id;
      }
      elem.cid = ++this.cid;
    });
  }

  if(appData) {
    this.addDataPid(btnGroupColumns, appData);
    /////清空数据
    var keySet = this.childrenRow.keySet();
    for(var key in keySet){
      if(this.childrenRow.get(keySet[key]) && this.childrenRow.get(keySet[key]).length)
        this.childrenRow.get(keySet[key]).length = 0;
    }
    /////总行数
    this.rowNum = 0;
    this.addChildrenRow(appData);
    ++this.rowNum;
    /////判断应用对应的checkbox是否选中，列头对应的checkbox是否选中
    this.checkGroupAndColumnState();
  }
}

 

v　　2.RoleCheckbox.js

  View Code

 　　封装antd 的Checkbox组件

v　　3.Map.js

  View Code

　　js实现的Map工具类。

v 四、需求变更

　　功能虽然完成了，但是总是避免不了需求的变更。要求选择左边应用对应的checkbox时，不在操作该应用对应的按钮的checkbox,也就是整个行不是全选了。应用对应的checkbox用来进行删除操作。

v　　1.改变后的Table效果

　　

v　　2.RoleApplicationTable.js

  View Code

v五、心得体会

　　最近使用react + redux + webpack进行web开发，感觉进步很快，已经熟悉了基本的流程。后续要研究一下webpack。

本文转自 小眼儿 博客园博客，原文链接：http://www.cnblogs.com/hujunzheng/p/5812046.html，如需转载请自行联系原作者