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，如需转载请自行联系原作者
