案例 hdsp-数据质量-标准规则
一、通用方法
获取当前节点的父节点
list 数据结构转换为 treeList结构
/**
* 获取 Tree 中的 parentKey
* @param {String} key key
* @param {Array} tree tree
* @param {String} primaryKey primaryKey
*/
functiongetParentKeyOfTree(key,tree,primaryKey) {
letparentKey;
for(leti=0;i<tree.length;i++) {
constnode=tree[i];
if(node.children) {
if(node.children.some(item=>item[primaryKey]===key)) {
parentKey=node[primaryKey];
}elseif(getParentKeyOfTree(key,node.children,primaryKey)) {
parentKey=getParentKeyOfTree(key,node.children,primaryKey);
}
}
}
returnparentKey;
}
/**
* List结构转换成TreeList结构
* @param {Array} dataList dataList
*/
functionlistToTreeList(dataList) {
constcloneDataList=cloneDeep(dataList);
constmap={};
cloneDataList.forEach((item)=>{
map[item.groupId===undefined?-1:item.groupId]=item;
});
constval=[];
cloneDataList.forEach((item)=>{
constparent=map[item.parentGroupId];
if(parent) {
(parent.children||(parent.children=[])).push(item);
}else{
val.push(item);
}
});
returnval;
}
二、DataSet配置
primaryKey:'groupId',
autoQuery:true,
paging:false,
selection:'single',
parentField:'parentGroupId',
idField:'groupId',
三、渲染树节点
渲染树
循环渲染树节点
/**
* 循环渲染Tree节点
* @param {Object} data data
*/
@Bind()
loopTreeList(data) {
const{selectedGroupId}=this.props;
const{searchValue}=this.state;
returndata.map((item)=>{
const{groupId,groupName='',children}=item;
constindex=groupName.indexOf(searchValue);
constbeforeStr=groupName.substr(0,index);
constafterStr=groupName.substr(index+searchValue.length);
// 根节点
constrootFlag=groupId===0;
constmenu=(
<MenuclassName={styles['rule-group-menu']}onClick={({key})=>this.handleRuleGroupMenuClick(key,item)}>
<Menu.ItemonClick={this.handleMenuItemStopPropagation}key={RULE_GROUP_ACTION.EDIT}disabled={rootFlag}>
{HZERO_COMMON_LANG.BUTTON_EDIT}
</Menu.Item>
</Menu>
);
constmenuDropdown=selectedGroupId===groupId&&(
<Dropdownoverlay={menu}>
<IcononClick={this.handleIconStopPropagation}className={styles['rule-group-icon']}type="more_vert"/>
</Dropdown>
);
consttitle=index>-1?(
<>
{beforeStr}
<spanstyle={{color:'#f50'}}>{searchValue}</span>
{afterStr}
{menuDropdown}
</>
) : (
<>
<span>{groupName}</span>
{menuDropdown}
</>
);
leticon;
if(rootFlag) {
icon=ICON_TYPE.ROOT_FOLDER;
}else{
icon=ICON_TYPE.FOLDER;
}
if(children) {
return(
<TreeNodekey={groupId}icon={<Icontype={icon}/>}title={title}>
{this.loopTreeList(children)}
</TreeNode>
);
}
return<TreeNodeicon={<Icontype={icon}/>}key={groupId}title={title}/>;
});
}
render() {
const{ruleGroupDS,selectedGroupId}=this.props;
const{expandedKeys,autoExpandParent}=this.state;
constdataList=ruleGroupDS.toData();
consttreeDataList=listToTreeList(dataList);
return(
<divstyle={{padding:10}}>
<Rowgutter={4}style={{marginBottom:8}}>
<Colspan={18}>
<Search
placeholder={HZERO_COMMON_LANG.BUTTON_SEARCH}
onSearch={(e)=>this.handleSearchChange(e,treeDataList)}
/>
</Col>
</Row>
<Tree
className={styles['rule-group-tree']}
showIcon
onSelect={this.handleTreeSelect}
onExpand={this.handleTreeExpand}
expandedKeys={expandedKeys.map(x=>String(x))}
selectedKeys={[String(selectedGroupId)]}
autoExpandParent={autoExpandParent}
>
{this.loopTreeList(treeDataList)}
</Tree>
</div>
);
}
###
四、查询树节点
/**
* 搜索字符
* @param {Object} value value
* @param {Array} treeDataList treeDataList
*/
@Bind()
handleSearchChange(value,treeDataList) {
const{ruleGroupDS}=this.props;
constdataList=ruleGroupDS.toData();
constexpandedKeys=dataList.map(item=>{
const{groupName=''}=item;
if(groupName.indexOf(value)>-1) {
returngetParentKeyOfTree(item.groupId,treeDataList,'groupId');
}
returnnull;
}).filter((item,i,self)=>item&&self.indexOf(item)===i);
this.setState({
expandedKeys:expandedKeys.concat('0'),
searchValue:value,
autoExpandParent:true,
});
}
