zTree[以SpringMVC为框架实现树结构异步传输]

作者: LeaveStyle | 来源:发表于2018-09-07 01:06 被阅读52次

zTree[以SpringMVC为框架实现树结构异步传输]
ztree组件使用,spring,springMVC整合
数据结构--线段树
SpringMVC开发知识点速查
SpringMVC基本概念
Spring MVC（1）
SSM Spring MVC
SpringMVC异步实现方式
SpringMVC架构实现原理
spring mvc 手写MVC原理分析流程图（二）

这两天被这个zTree整的头疼，虽说能拿来就用，但不明白其原理的我踩了不少坑，被isParent这个参数坑的不轻。
zTree官网，里面关于异步传输这一块竟然没有代码demo，生气。
下面直接展示代码了，SpringMVC框架不会搭的参考我的其他文章。

1. web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <display-name>Archetype Created Web Application</display-name>

    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

2. springmvc-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
            http://www.springframework.org/schema/beans/spring-beans.xsd
            http://www.springframework.org/schema/context
            http://www.springframework.org/schema/context/spring-context.xsd
            http://www.springframework.org/schema/mvc
            http://www.springframework.org/schema/mvc/spring-mvc.xsd">


    <mvc:annotation-driven/>
    <!--指明 controller 所在包，并扫描其中的注解-->
    <context:component-scan base-package="com.test.controller"></context:component-scan>
    <!--指明 service 所在包，并扫描其中的注解-->
    <context:component-scan base-package="com.test.service"></context:component-scan>

    <!--ViewResolver 视图解析器-->
    <!--用于支持Servlet、JSP视图解析-->
    <bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

3. Orgs实体类

注意：我在这里设置了isParent

package com.test.bean;

public class Orgs {
    private int id;
    private String name;
    private int pId;
    private boolean isParent;

    public boolean getIsParent() {
        return isParent;
    }
    public void setIsParent(boolean isParent) {
        this.isParent = isParent;
    }
    public Orgs() {
        super();
    }
    public Orgs(int id, String name, int pId, boolean isParent){
        this.id = id;
        this.name = name;
        this.pId =pId;
        this.isParent = isParent;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getPId() {
        return pId;
    }
    public void setPId(int pId) {
        this.pId = pId;
    }
}

4. Service层来模拟数据（为了简单没有去配置数据库）

接口

package com.test.service;
import com.test.bean.Orgs;
import java.util.List;

public interface OrgsService {
    List<Orgs> queryOrgsList();
    List<Orgs> queryOrgsListFather();
    List<Orgs> queryOrgsListChildren();
}

接口的实现

package com.test.service;

import com.test.bean.Orgs;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

@Service("orgsService")
public class OrgsServiceImpl implements OrgsService{

    @Override
    public List<Orgs> queryOrgsList(){
        List<Orgs> orgsList = new ArrayList<Orgs>();

        Orgs org1 = new Orgs(1, "1所",0, true);
        Orgs org2 = new Orgs(2, "2所",0, true);
        Orgs org3 = new Orgs(11, "一部",1,true);
        Orgs org4 = new Orgs(12, "二部",1,true);
        Orgs org5 = new Orgs(21, "三部",2,true);
        Orgs org6 = new Orgs(22, "四部",2,true);
        Orgs org7 = new Orgs(111, "一室",11,true);
        Orgs org8 = new Orgs(112, "二室",11,true);
        Orgs org9 = new Orgs(121, "三室",12,true);
        Orgs org10 = new Orgs(122, "四室",12,true);
        Orgs org11 = new Orgs(211, "五室",21,true);
        Orgs org12 = new Orgs(212, "六室",21,true);
        Orgs org13 = new Orgs(221, "七室",22,true);
        Orgs org14 = new Orgs(222, "八室",22,true);
        Orgs org15 = new Orgs(1211, "一组",121,false);
        Orgs org16 = new Orgs(1212, "二组",121,false);

        orgsList.add(org1);
        orgsList.add(org2);
        orgsList.add(org3);
        orgsList.add(org4);
        orgsList.add(org5);
        orgsList.add(org6);
        orgsList.add(org7);
        orgsList.add(org8);
        orgsList.add(org9);
        orgsList.add(org10);
        orgsList.add(org11);
        orgsList.add(org12);
        orgsList.add(org13);
        orgsList.add(org14);
        orgsList.add(org15);
        orgsList.add(org16);

        return orgsList;
    }
    //拿到根结点的集合
    @Override
    public List<Orgs> queryOrgsListFather(){
        List<Orgs> orgsList = queryOrgsList();
        List<Orgs> orgsListFather = new ArrayList<Orgs>();
        for (Orgs orgs : orgsList){
            if(orgs.getPId() == 0){
                orgsListFather.add(orgs);
            }
        }
        return orgsListFather;
    }
    //拿到子节点集合
    @Override
    public List<Orgs> queryOrgsListChildren(){
        List<Orgs> orgsList = queryOrgsList();
        List<Orgs> orgsListChildren = new ArrayList<Orgs>();
        for (Orgs orgs : orgsList){
            if(orgs.getPId()!= 0){
                orgsListChildren.add(orgs);
            }
        }
        return orgsListChildren;
    }
}

5. Controller层

package com.test.controller;


import com.test.bean.Orgs;
import com.test.service.OrgsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Controller
public class OrgsController {

    @Autowired
    private OrgsService orgsService;

    @RequestMapping(value = "/toOrgsList")
    public String toOrgsList(){
        return "orgsList";
    }
    @RequestMapping(value = "/orgsListFather")
    @ResponseBody
    public List<Orgs> orgsListFather() throws Exception{
        List<Orgs> orgsListFather = orgsService.queryOrgsListFather();
        return orgsListFather;
    }
    @RequestMapping(value = "/orgsListChildren", method = RequestMethod.POST)
    @ResponseBody
    public List<Orgs> orgsListChildren(@RequestParam("id") int pId) throws Exception{
        List<Orgs> orgsListChildren = orgsService.queryOrgsListChildren();
        List<Orgs> list = new ArrayList<Orgs>();
        for (Orgs orgs : orgsListChildren){
            if (orgs.getPId() == pId) {
                list.add(orgs);
            }
        }
        return list;
    }
}

6. 前端页面

主页index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>SpringMVC Demo 首页</title>

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=path %>/css/zTreeStyle.css"/>
    <script src="<%=path %>/js/jquery-1.4.4.min.js"></script>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="<%=path %>/js/jquery.ztree.core.js"></script>

<body>
<h1>这里是SpringMVC Demo首页</h1>
<a href="/toOrgsList.do">查看部门信息</a>
</body>
</html>

树结构展示页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>部门信息树状图</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=path %>/css/zTreeStyle.css"/>
    <script src="<%=path %>/js/jquery-1.4.4.min.js"></script>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="<%=path %>/js/jquery.ztree.core.js"></script>
</head>

<body>
<h1>树状图展示</h1>
<script type="text/javascript">
    $(document).ready(function () {
        $.get("/orgsListFather.do", function(data) {
            $.fn.zTree.init($("#treeDemo"), setting, data);
        });
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    ///rootPId: '0'
                }
            },
            async: {
                enable: true,//是否异步加载
                url: "/orgsListChildren.do",//加载数据的url
                autoParam: ["id"],//异步发送请求时,表示自动传指定属性的参数值
                dataFilter: filter,
                dataType : "json",
                type:"post"
            },
            //回调函数
            callback : {
                onClick: onClick,//用于捕获节点被点击的事件回调函数
                onAsyncSuccess: onAsyncSuccess,//用于捕获异步加载正常结束的事件回调函数
            }
        };
        // 异步加载数据过滤器
        function filter(treeId, parentNode, responseData) {
            return responseData;
        };
        //点击触发
        function onClick(event, treeId, treeNode) {
            console.log(treeNode.id + ", " + treeNode.name);
        };
        //异步加载完成触发
        function onAsyncSuccess(event, treeId, treeNode, msg) {
            console.log(msg);
        };
    });
</script>
<body>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</body>
</html>

7. 我用maven做的，依赖jar如下

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.test</groupId>
  <artifactId>springMVCtest2</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>springMVCtest2 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>

    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <spring.version>4.2.4.RELEASE</spring.version>

    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <hibernate.version>4.3.0.Final</hibernate.version>
    <junit.version>4.11</junit.version>
    <hamcrest.version>1.3</hamcrest.version>
    <mockito.core.version>1.9.5</mockito.core.version>
  </properties>

  <dependencies>

    <!-- Spring & Spring mvc -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</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-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-expression</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
      <type>jar</type>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jms</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-orm</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-oxm</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</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>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-websocket</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-messaging</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.7.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.5.1</version>
    </dependency>

    <!-- Jdbc  -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.38</version>
    </dependency>

    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>${junit.version}</version>
      <scope>test</scope>
      <exclusions>
        <exclusion>
          <artifactId>hamcrest-core</artifactId>
          <groupId>org.hamcrest</groupId>
        </exclusion>
      </exclusions>
    </dependency>

    <!-- jackson -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.5.1</version>
    </dependency>

    <!--json-->
    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
      <classifier>jdk15</classifier>
    </dependency>
  </dependencies>

  <build>
    <finalName>springmvctest</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

8.结果

这里不便透露用的名字，所以涂抹了部分。

结果视图

zTree[以SpringMVC为框架实现树结构异步传输]
这两天被这个zTree整的头疼，虽说能拿来就用，但不明白其原理的我踩了不少坑，被isParent这个参数坑的不轻。...
ztree组件使用,spring,springMVC整合
ztree的使用,spring和springMVC整合 1.ztree组件代码如下效果如下树结构放在左边，右...
数据结构--线段树
数组为存储的实现代码如下：以树结构存储的实现如下：
SpringMVC开发知识点速查
SpringMVC入门什么是SpringMVC 实现MVC设计模式的框架 SpringMVC核心组件 Dispa...
SpringMVC基本概念
SpringMVC简介 SpringMVC是目前最好的实现MVC设计模式的框架，是Spring框架的一个分支产品，...
Spring MVC（1）
1.1. 什么是Spring MVC SpringMVC是Spring框架内置的MVC的实现.SpringMVC就...
SSM Spring MVC
SpringMVC SpringMVC 实现了MVC，轻量级web框架封装了Servlet共有的行为（参数封装，视...
SpringMVC异步实现方式
上一篇 << >> 异步调用方式一：a、service上加上注解@Asyncb、在配置类上开启注解@EnableA...
SpringMVC架构实现原理
SpringMVC架构实现原理一、SpringMVC介绍 Spring mvc是一个基于mvc的web框架。其中...
spring mvc 手写MVC原理分析流程图（二）
手写SpringMVC框架流程图手写SpringMVC原理解析 1：自定义servlet实现HttpServle...