jquery ztree 的使用(从数据库中取数据)

<web.xml>

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring/applicationConfig.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <servlet>
    <servlet-name>springmvc</-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springmvc/spring-controller.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

<applicationContext.xml (spring配置文件)>

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       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/aop http://www.springframework.org/schema/aop/spring-aop.xsd
                           http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
    

    <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
        <property name="location" value="classpath:jdbcProperties/db.properties"/>
    </bean>

    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${driverClassName}"/>
        <property name="url" value="${url}"/>
        <property name="username" value="${username}"/>
        <property name="password" value="${password}"/>
    </bean>

    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:spring/mybatis-config.xml"/>
    </bean>

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.jetair.mapper" />
    </bean>

    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <tx:annotation-driven/>   <!--启动事物注解-->

    <context:annotation-config/>

    <context:component-scan base-package="com.jetair.service"/>

</beans>

<数据库信息 db.properties>

driverClassName=oracle.jdbc.driver.OracleDriver
url=jdbc:oracle:thin:@localhost:1521:orcl
username=scott
password=TIGER

<mybatis-config 配置文件>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

    <typeAliases>
        <package name="com.jetair.domin"/>
    </typeAliases>

</configuration>

<springmvc配置文件（spring-controller.xml）>

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       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/>

    <context:component-scan base-package="com.jetair.controller"/>

</beans>

<controller  控制器类>

package com.jetair.controller;

import com.jetair.domin.Emp;
import com.jetair.service.EmpService;
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.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by 22431 on 2016/8/18.
 */
@Controller
@RequestMapping("/handle")
public class EmpController {

    @Autowired
    private EmpService empService;

    @RequestMapping("/getTree")
    @ResponseBody
    public List <Emp> getTree(){
        List<Emp> list = new ArrayList<Emp>();
        Emp treeJob = empService.getTreeJob();
        list.add(treeJob);
        return list;
    }
}

<service 业务处理接口类>

package com.*.service;

import com.jetair.domin.Emp;

public interface EmpService {
    Emp getTreeJob();
}

<业务接口实现类 >

package com.*.service.impl;

import com.jetair.domin.Emp;
import com.jetair.mapper.EmpMapper;
import com.jetair.service.EmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Service("empService")
@Transactional(readOnly = true , propagation = Propagation.REQUIRED)
public class EmpServiceImpl implements EmpService {

    @Autowired
    private EmpMapper empMapper;

    public Emp getTreeJob() {
        Map<Integer,Emp>map = new HashMap();
        List<Emp> empList = empMapper.getTreeJob();
        Emp node1 = empList.get(0);
        map.put(node1.getEmpno() , node1);
        for (int i = 1 ; i < empList.size() ; i++){
            Emp emps = empList.get(i);
            int key = emps.getMgr();
            Emp e = map.get(key);
            if(e.getNodes()==null){
                e.setNodes(new ArrayList<Emp>());
            }
            Emp emp = new Emp();
            emp.setEmpno(emps.getEmpno());
            emp.setEname(emps.getEname());
            emp.setJob(emps.getJob());
            emp.setMgr(emps.getMgr());
            emp.setHiredate(emps.getHiredate());
            emp.setSal(emps.getSal());
            emp.setComm(emps.getComm());
            emp.setDeptno(emps.getDeptno());
            emp.setLevel(emps.getLevel());
            e.getNodes().add(emp);
            map.put(emps.getEmpno() , emp);
        }
        return node1;
    }
}

<emp对象>

package com.jetair.domin;

import java.util.Date;
import java.util.List;


public class Emp {
    private int empno;
    private String ename;
    private String job;
    private int mgr;
    private Date hiredate;
    private int sal;
    private int comm;
    private int deptno;
    private String level;
    private List<Emp>nodes;

    public List<Emp> getNodes() {
        return nodes;
    }

    public void setNodes(List<Emp> nodes) {
        this.nodes = nodes;
    }

    public String getLevel() {
        return level;
    }

    public void setLevel(String level) {
        this.level = level;
    }

    public int getEmpno() {
        return empno;
    }

    public void setEmpno(int empno) {
        this.empno = empno;
    }

    public String getEname() {
        return ename;
    }

    public void setEname(String ename) {
        this.ename = ename;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }

    public int getMgr() {
        return mgr;
    }

    public void setMgr(int mgr) {
        this.mgr = mgr;
    }

    public Date getHiredate() {
        return hiredate;
    }

    public void setHiredate(Date hiredate) {
        this.hiredate = hiredate;
    }

    public int getSal() {
        return sal;
    }

    public void setSal(int sal) {
        this.sal = sal;
    }

    public int getComm() {
        return comm;
    }

    public void setComm(int comm) {
        this.comm = comm;
    }

    public int getDeptno() {
        return deptno;
    }

    public void setDeptno(int deptno) {
        this.deptno = deptno;
    }
}

<mapper映射文件>

<?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.jetair.mapper.EmpMapper">
    <select id="getTreeJob" resultType="Emp">
      SELECT
	    empno,
	    ename,
	    JOB,
	    mgr,
	    hiredate,
	    sal,
	    comm,
	    deptno,
	    LEVEL
      FROM
	    emp E START WITH ename = 'JONES' CONNECT BY PRIOR empno = mgr
    </select>

</mapper>

<img src="https://img-blog.csdn.net/20160823133142297?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

然后就是引入js文件和css文件与image图片

<getTree.js>

<pre name="code" class="html"><index.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <link href="./css/zTreeStyle.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="./js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="./js/getTree.js" charset="utf-8"></script>

    </head>
    <body>
        <%--雇员<select id="ename"></select>--%>

        <div class="row">
            <div class="col-md-4">
                <div class="zTreeDemoBackground left">
                    <ul id="tree" class="ztree"></ul>
                </div>
            </div>
        </div>
        <input type="text" id="empno" placeholder="雇员名称">
        <input type="text" id="ename"><br>
        <input type="text" id="job"><br>
        <input type="text" id="mgr"><br>
        <input type="text" id="hiredate"><br>
        <input type="text" id="sal"><br>
        <input type="text" id="comm"><br>
        <input type="text" id="deptno"><br>
        <input type="text" id="level">

    </body>
</html>

var setting={
    async:{
        enable:true,
        url:"http://localhost:8080/handle/getTree.do",
        type:"post",
    },
    data:{
        key:{
            children:"nodes",
            name:"ename"
        }
    },
    callback: {
        onClick: zTreeOnClick
    },
    view:{
        fontCss:{

        },
        showIcon: false,
        showLine: false
    }
};
function zTreeOnClick(event, treeId, treeNode) {
    $("#ename").val(treeNode.empno);
    $("#empno").val(treeNode.ename);
    $("#job").val(treeNode.job);
    $("#mgr").val(treeNode.mgr);
    $("#hiredate").val((new Date(treeNode.hiredate)).Format("yyyy-MM-dd hh:mm:ss"));
    $("#sal").val(treeNode.sal);
    $("#comm").val(treeNode.comm);
    $("#deptno").val(treeNode.deptno);
    $("#level").val(treeNode.level);

}
/*初始化ztree控件*/
$(function () {
    $.fn.zTree.init($("#tree"), setting);
});
/*
 js由毫秒数得到年月日
 使用： (new Date(data[i].creationTime)).Format("yyyy-MM-dd hh:mm:ss.S")
 */
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };