JAVA简易树形数据从数据库加载一二级

一、数据库表

id 为各节点对应的 id,parent_id 为各内容对应的父节点。level给它们进行了分级描述。root_id也可以看成是一个对应的根节点id。

二、实体类

public class Tree {

    private String id;
    private String parentId;
    private String text;
    private String level;
    private String href;
    private String rootId;
    private List<Tree> nodes;

	//get set .....

把类看成是一级节点，把类里的集合 nodes 看成是二级节点。

三、业务实现类

这里只粘贴主要方法

@Service
public class TreeServiceImpl implements TreeService{

    @Autowired
    private TreeDao treeDao;

    @Override
    public List<Tree> findAll() {

        List<Tree> allNodes = new ArrayList<>();
        //1.读取一级节点
        allNodes = treeDao.findByLevel("1");//读取第一层节点
        for (int i=0; i<allNodes.size();i++) {
            Tree tr = allNodes.get(i);
            List<Tree> childs = treeDao.findByParentid(tr.getId(),"2");
            tr.setNodes(childs);
            System.out.println("--childs--"+childs);
        }

        return allNodes;
    }

0、先定义一个集合

List<Tree> allNodes = new ArrayList<>();

1、读取所有的第一层节点，并把它们放进集合里面

allNodes = treedao.findByLevel("1");	//读取第一层节点

2、循环集合，找到它们对应的子节点，添加进去。

for（int i = 0 ; i < allNodes.size ; i++）{
	Tree tr = allNodes.get[i];	//循环当前父节点
	Tree childs = treedao.findByParentId(tr.getId,"2");		//查找当前父节点下的子节点
	tr.setNodes(childs);		//把对应的子节点放进父节点里
}

3.全都拿到了，返回结果

四、SQL语句

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wgc.tree.dao.TreeDao">

    <!-- 拿到第一层的节点 -->
    <select id="findByLevel" resultType="Tree" parameterType="String">
        select * from tree where level = #{level} order by id;
    </select>

    <!-- 根据第一层的节点，查找其子节点 -->
    <select id="findByParentid" resultType="Tree">
        select * from tree where parent_id = #{parentId} and level = #{level} order by id;
    </select>

</mapper>

五、前端代码

有关依赖和样式引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>树形控件</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-treeview.css">
		<script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
		<script src="bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				console.log("初始化");
				$.ajax({
					url: 'http://127.0.0.1:8080/findAll',
					type:"GET",
					success:function(treeData) {
						console.log(treeData);
						$('#tree').treeview({
							data:treeData,
							showCheckbox:true,
							leveles:1
						});
					}
				})
			});
		</script>
	</head>

	<body>
		<div id="tree" style="overflow: auto; margin-left: 0; margin-top: 0;padding-left:170px;"></div>
	</body>
	
</html>

六、控制层

这里用了跨域注解和JSON返回数据

@RestController
@CrossOrigin
public class TreeController {

    @Autowired
    private TreeService treeServiceImpl;

    @RequestMapping("findAll")
    public List<Tree> findAll() {
        List<Tree> list = treeServiceImpl.findAll();
        System.out.println("--findAll---"+list);
        return list;
    }
}

最终结果

在这里插入图片描述
这样就动态的从数据库拿出来了

酒上

发布了4 篇原创文章 · 获赞 0 · 访问量 41

私信关注