spring+srpingmvc+hibernate实现动态ztree生成树状图效果

实现动态ztree生成树状图效果，需要涉及到Spring+Spring MVC+Hibernate的技术栈。下面是实现该功能的完整攻略：

1. 搭建项目框架

首先，我们需要搭建一个SpringMVC的项目，也就是创建一个maven工程。在pom.xml中添加spring、springMVC和hibernate的依赖。

<dependencies>
    <!-- Spring -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context-support</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-core</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>${spring.version}</version>
    </dependency>

    <!-- hibernate -->
    <dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-core</artifactId>
        <version>${hibernate.version}</version>
    </dependency>
</dependencies>

2. 数据库建表

为了实现树状图的效果，我们需要在数据库中建立一个相应的表。我们为了方便，这里只建立一个简单的表，如下：

CREATE TABLE `tree` (
    `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    `pId` INT(11) DEFAULT NULL COMMENT '父节点',
    `name` VARCHAR(50) DEFAULT NULL COMMENT '节点名称',
    PRIMARY KEY (`id`)
) COMMENT='动态生成树结构demo';

3. 实体类

接下来，我们需要定义一个实体类来代表数据库中的表。可以参考如下代码：

@Entity
@Table(name = "tree")
public class Tree {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private Integer pId;

    private String name;

    // getters and setters...
}

4. Dao层和Service层

为了实现树状图的效果，我们需要根据pid查询对应的节点，然后将所有节点按照树状结构排列。因此，需要定义相应的dao层和service层。可以参考如下代码：

Dao层

@Repository
public class TreeDaoImpl implements TreeDao {
    @Autowired
    private SessionFactory sessionFactory;

    @Override
    public List<Tree> findByPid(Integer pid) {
        String hql = "from Tree where pId = ?";
        Query query = sessionFactory.getCurrentSession().createQuery(hql);
        query.setParameter(0, pid);

        return query.list();
    }
}

Service层

@Service
public class TreeServiceImpl implements TreeService {
    @Autowired
    private TreeDao treeDao;

    @Transactional
    @Override
    public List<Tree> find(Integer pid) {
        List<Tree> treeList = treeDao.findByPid(pid);
        if (!CollectionUtils.isEmpty(treeList)) {
            for (Tree tree : treeList) {
                Integer id = tree.getId();
                List<Tree> tmpList = find(id);
                if (!CollectionUtils.isEmpty(tmpList)) {
                    tree.setChildren(tmpList);
                }
            }
        }

        return treeList;
    }
}

5. Controller层和前端页面

最后，我们需要定义一个Controller层的Java类来映射前端页面所需要的请求。可以参考如下代码：

Controller层

@Controller
@RequestMapping("/tree")
public class TreeController {
    @Autowired
    private TreeService treeService;

    @RequestMapping(value = "/initTree", method = RequestMethod.GET)
    @ResponseBody
    public List<Tree> initTree(@RequestParam(value = "pid", required = false, defaultValue = "0") Integer pid) {
        return treeService.find(pid);
    }

    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public String index() {
        return "index";
    }
}

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树状结构demo</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.69/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
</head>
<body>
<div id="tree"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.69/js/jquery.ztree.all.min.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "tree/initTree",
            data: "pid=0",
            dataType: "json",
            success: function (data) {
                if (data != null && data.length > 0) {
                    var zNodes = [];
                    $.each(data, function (index, item) {
                        zNodes.push({
                            id: item.id,
                            pId: item.pId,
                            name: item.name,
                            open: true
                        });
                    });

                    var setting = {
                        view: {
                            dblClickExpand: false
                        },
                        data: {
                            simpleData: {
                                enable: true
                            }
                        }
                    };

                    var t = $("#tree");
                    t = $.fn.zTree.init(t, setting, zNodes);
                }
            }
        });
    });
</script>
</body>
</html>

6. 示例

以上就是实现动态ztree生成树状图效果的完整攻略。为了更好地理解这个过程，下面提供两条示例。

示例1

我们需要创建一个名为ABC的节点，这个节点是id=0的节点的子节点。

Tree node = new Tree();
node.setPid(0);
node.setName("ABC");
treeService.save(node);

示例2

我们需要删除一个节点，这个节点是id=1的节点。

Tree node = treeService.find(1);
treeService.delete(node);

希望这些示例可以更好地帮助您理解这个过程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：spring+srpingmvc+hibernate实现动态ztree生成树状图效果 - Python技术站