树结构Tree-CFANZ编程社区

一个简单的树结构：

1.数据库：
node表：
在这里插入图片描述
user表：

2.实体类：
因为node表中没有nodes字段，所以要用@JsonProperty进行映射，
nodes代表父级下的子级，
如：结尾 6下123，就是查出来是6这条数据，然后node6.getNodes()里放着123，
123是根据6的id对应着123中的pid查出来的

public class Node {
	private Integer id;
	private String text;
	private String href;
	private Integer pid;
	@JsonProperty("nodes")
	private List<Node> nodes;
}
public class User {
	private Integer id;
	private Integer userNo;
	private String userName;
	private String userPassword;
	private Integer pid;
}

3.index页面:
头文件：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../resource/bootstrap4/css/bootstrap.css">
    <script src="../../resource/js/jquery-3.2.1.js"></script>
    <script src="../../resource/bootstrap4/js/bootstrap.js"></script>
    <script src="../../resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>
    <title>首页</title>
</head>

页面代码：

<body>
<div class="row">
    <div class="col-3">
        <div class="list-group" id="list-tab" role="tablist">
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content" id="nav-tabContent">
        </div>
    </div>
</div>
</body>

js代码：

<script>
    $(function () {
    	//ajax加载树状结构
        $.post("getTree",function (obj) {
        	//alert(JSON.stringify(obj))
            $("#list-tab").treeview({//加载树
                levels: 100,//节点展开
                data:obj,//添加节点数据
                onNodeSelected: function (event,data) {//点击节点触发事件
                    if(data.href!=null&&data.href!=''){
                        $("#nav-tabContent").load(data.href);//通过href加载页面数据到菜单的右侧
                    }
                }
            })
        })
    })
</script>

4.Controller层：

	@RequestMapping("getTree")
    @ResponseBody
    public List<Node> getTree(HttpServletRequest request){
        User loginUser = (User) request.getSession().getAttribute("user");
        Node node = new Node();
        node.setText(loginUser.getUserName());
        node.setNodes(companyService.getTree(loginUser.getPid()));
        ArrayList tree = new ArrayList();
        tree.add(node);
        return tree;
    }

Mapper.xml文件：

	<resultMap id="nodeMap" type="com.chaiyi.entity.Node" autoMapping="true">
        <id column="id" property="id"></id>
        <collection column="id" property="nodes" select="selectChildTree"></collection>
    </resultMap>
    
    <select id="getTree" resultMap="nodeMap">
        select * from node where pid = #{value}
    </select>
    
    <select id="selectChildTree" resultMap="nodeMap">
        select * from node where pid = #{value}
    </select>

递归查询：
首先，用户登录成功后，获得用户中的pid,
根据pid查询node中的数据，
然后根据查出数据的id，对应子级的pid,
查出子级中的数据

在这里插入图片描述
如上图：
如果用户中的pid的值为0，
那么我们可以查出1条数据（8仓库物料信息），
根据子级pid=父级node_id进行递归查询，
那么我们可以查出（8仓库物料信息）下的2条数据（6仓库）和（7物料），
依次往下：
查出 6下的123 和7下的45