antd树型选择控件选择父级_react+antd实现树形菜单展现(后台使用java)

1.数据库表设计(我使用的是单表一对多,里面须要有一个pid指向父层级的id)

2.在后台获取数据的时候,使用的实体类为此种形式react

public class UserTree {

private Integer id;

private String name;

private Integer pid;

//每一个实体类对象中都有持有本类对象的集合

private List childrenList;

省略get,set方法

}

经过此种方式传递到前台的json数据格式化为

[{

id: 'xx',

name: 'xx',

pid: 'xx',

childrenList: [{

id: 'xx',

name: 'xx',

pid: 'xx',

childrenList: [{ ......}]

}]

}]

3.如何深递归遍历数据web

/**

* 查询树菜单,深递归

*/

传入的id值为pid的值,在外部调用时,第一次传入的为父层级的pid值,也就是0

public List searchUserTreeById(Integer id) {

//1.获得全部的父节点集合

List userTrees = reactMapper.searchUserTreeById(id);

//2.判断父节点下面还有没有子节点

if(userTrees!=null && userTrees.size()!=0){

//3.遍历全部的父节点集合,根据父节点id查询数据库得到全部该父节点下全部的子节点

for (UserTree userTree : userTrees) {

List userTrees1 = searchUserTreeById(userTree.getId());

userTree.setChildrenList(userTrees1);

}

}

return userTrees;

}

4.sql语句怎么写sql

Mapper接口写法,传入当前对象的id值便可

public List searchUserTreeByPid(Integer id);

sql语句比较简单,在Mapper文件中使用此语句便可

SELECT id,name,pid FROM user_tree WHERE pid=#{id}

5.在前台须要作递归遍历数据,直接上代码,我使用的是修饰器语法,全部数据请求都在store中进行数据库

import React from 'react'

import { Tree ,Menu} from 'antd';

import {inject, observer} from 'mobx-react'

import demoStore from '../store'

const DirectoryTree = Tree.DirectoryTree;

const TreeNode = Tree.TreeNode;

const SubMenu = Menu.SubMenu;

@inject("demoStore") @observer

class UserTree extends React.Component{

//递归方法遍历菜单

recursion=(dataSource)=>{

return (

dataSource.map((menu, index) => {

if (menu.childrenList) {

return (

{this.recursion(menu.childrenList)}

)

} else {

return (

{menu.name})

}

})

)

}

//递归方法遍历树形控件

renderTree = (data,idx) =>{

console.log('树形菜单数据源', data);

return data.map(item => {

if (!item.childrenList) {

return (

)

} else {

return (

{this.renderTree(item.childrenList)}

)

}

})

};

// renderTreeNodes(data) {

// return data.map((item) => {

// if (item.childrenList) {

// return (

//

// {this.renderTreeNodes(item.childrenList)}

//

// );

// }

// return ;

// });

// }

//页面加载调用

componentDidMount(){

this.props.demoStore.selectParentId(0);

}

render(){

const {DataSource,treeList} = this.props.demoStore

// const treeElement = this.renderTree(treeList);

// console.log(this.props.demoStore.tree[0].name,"1111111")

return(

{/*返回树结构*/}

multiple

defaultExpandAll

onSelect={this.onSelect}

onExpand={this.onExpand}

>

{/*调用上面的递归方法*/}

{this.renderTree(treeList)}

{/*返回菜单结构*/}

onClick={this.handleClick}

style={{ width: 256 }}

defaultSelectedKeys={['1']}

defaultOpenKeys={['sub1']}

mode="inline"

>

{/*调用上面的递归方法*/}

{this.recursion(treeList)}

)

}

}

export default UserTree

这是树形控件的请求,写在store中,json

//树形控件

selectParentId= async (id)=>{

const tree = await json.get("http://localhost:8080/Request:selectTree/"+id);

//改变观察者模式的值必须在runInAction方法中改变

runInAction(()=>{

// this.tree = tree;

this.treeList = Array.isArray(tree) ? tree :[]

})

}

至此:树结构以及能够在前台显示了,效果以下,能够无限深递归

antd