1. 程式人生 > >ant design tree 資料模式 和 獲取父節點

ant design tree 資料模式 和 獲取父節點

資料的結構:

const nodeList=[

{id:1,name:樹節點一",children:[{id:2,name:樹節點二",children:[{id:3,name:樹節點三"}]}]},

{id:4,name:樹節點四"},

{id:5,name:樹節點五",children:[{id:2,name:樹節點二"}]},

]

寫法:

<Tree defaultExpandAll checkable  onCheck={this.onCheck}>

      {this.setPermission(nodeList)

}

</Tree>

 

 

setPermission =nodeList=>{

const children=[];

nodeList.forEach(item=>{

if(!item.children){

 children.push(<TreeNode title={item.name} key={item.id}/>)

}else{

children.push(

  children.push(

<TreeNode title={item.name} key={item.id}>

{this.setPermission(item.children)}

</TreeNode>)

)

}

})

return children;

}

 

當要獲取父節點的時候

onCheck=(checkedKeys,info)=>{

//選中的節點   checkedKeys

//選中子節點的父節點    info.halfCheckedKeys

}