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