ssm整合实现zTree异步加载

ssm整合实现zTree异步加载

---

前言

学习到zTree时，在实现异步加载树的时候有点疑问，最后解决了。记录一下，希望能帮助到刚刚接触到zTree的同学学习。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是异步加载树？

      异步加载树：是指在一开始的时候只会创建并加载树的根节点，树的子节点都没被创建和加载。当需要点击某个节点的时候，点击节点才会去创建和加载该节点下的子节点。以此来实现异步的操作。

二、如何实现异步加载树

      思想：1.在dao层设置两个方法，一个是根据父id查询树（作用：当初始化有第一个节点后，第一个节点的id用来当作父id进行查询，返回出第一个节点的所有子节点。）；还有一个方法是判断当前节点是否还有子节点（作用：用于记录和标记当前节点是否为父节点。）；
                 2.制作出符合创建zTree时的参数zNodes的数据（可以做成List<Map<String, Object>>这种格式，然后用转换为json对象传入界面。本文章的案例使用的是jackson来转）。
                 3.在界面上使用zTree的函数实现点击扩展和添加节点等方法来实现最终的异步加载树的效果。

效果图：

案例

1.创建数据库

      注：id和pid的关系要对应着树的关系即可，其他都可以根据自己的想法和需求来改变。

CREATE TABLE `city` (
  `id` varchar(50) NOT NULL DEFAULT '',
  `name` varchar(50) DEFAULT NULL,
  `pid` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `city` VALUES ('1', '中国', '0');
INSERT INTO `city` VALUES ('2', '福建省', '1');
INSERT INTO `city` VALUES ('21', '福州市', '2');
INSERT INTO `city` VALUES ('211', '晋安区', '21');
INSERT INTO `city` VALUES ('22', '厦门市', '2');
INSERT INTO `city` VALUES ('23', '泉州市', '2');
INSERT INTO `city` VALUES ('3', '广东省', '1');
INSERT INTO `city` VALUES ('31', '广州市', '3');
INSERT INTO `city` VALUES ('4', '云南省', '1');
INSERT INTO `city` VALUES ('41', '昆明市', '4');

2.创建maven工程

2.1.依赖

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <spring.version>5.0.2.RELEASE</spring.version>
    <slf4j.version>1.6.6</slf4j.version>
    <log4j.version>1.2.12</log4j.version>
    <mysql.version>5.1.6</mysql.version>
    <mybatis.version>3.4.5</mybatis.version>
  </properties>

  <dependencies>
    <!-- spring -->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.6.8</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</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>