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

来源：互联网发布：现场网络直播编辑：程序博客网时间：2024/06/04 20:11

<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.OracleDriverurl=jdbc:oracle:thin:@localhost:1521:orclusername=scottpassword=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="http://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;    };

1 1