(Jquery 功能篇) Jquery Z_tree异步树加载实例代码

来源：互联网发布：淘宝退货支付运费编辑：程序博客网时间：2024/06/09 16:22

效果截图：

servlet（服务端代码）

package com.rf.servlet;import java.io.IOException;import java.io.OutputStream;import java.sql.Connection;import java.sql.ResultSet;import java.sql.Statement;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.rf.util.OracleUtil;public class TreeServlet extends HttpServlet {/** *  */private static final long serialVersionUID = 1L;@Overridepublic void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stub// 上传参数：用户IdString userId = request.getParameter("userid");// 数据相关工具类Connection connection = null;ResultSet resultset = null;ResultSet result = null;Statement statement = null;// 相关查询语句和相关参数String sql = "select user_vehgroup.vehgroupid,vehgroupmain.vehgroupname from user_vehgroup,vehgroupmain where userid in (select userid from Usermain where username='"+ userId+ "') and user_vehgroup.vehgroupid=vehgroupmain.vehgroupid";// 添加部门IdList<String> list = new ArrayList<String>();// 添加部门名称List<String> lists = new ArrayList<String>();// 相关的数据信息List<String> datas = new ArrayList<String>();// 执行相关逻辑请求try {connection = OracleUtil.getConn();statement = connection.createStatement();resultset = statement.executeQuery(sql);while (resultset.next()) {String data = resultset.getString(1);String depat = resultset.getString(2);list.add(data);lists.add(depat);}if (resultset != null) {resultset.close();}StringBuffer buffer = new StringBuffer();buffer.append("[");// 数据相关遍历for (int i = 0; i < list.size(); i++) {// 部门编号String index = list.get(i);String department = lists.get(i);buffer.append("{id:").append(index).append(",pid:").append("0").append(",name:'").append(department).append("', open:true}").append(",");String hql = "select id,deviceid,cph,compid from vehicle where compid='"+ index + "'";result = statement.executeQuery(hql);while (result.next()) {buffer.append("{id:").append(result.getString(1)).append(",pid:").append(index).append(",name:'").append(result.getString(3) + "'}").append(",");}}// 反转buffer.reverse();// 删除buffer.delete(0, 1);// 再次反转buffer.reverse();buffer.append("]");// 相关数据输出OutputStream out = response.getOutputStream();out.write(buffer.toString().getBytes("UTF-8"));out.close();// 数据库关闭OracleUtil.closeCSR(connection, statement, result);} catch (Exception e) {e.printStackTrace();}}@Overridepublic void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// TODO Auto-generated method stubdoGet(req, resp);}}

页面代码（Jsp代码）

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>订单信息分页</title><!--加载jquery核心文件  --><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script><script type="text/javascript"src="js/jquery.ztree.excheck-3.5.min.js"></script><!--加载css文件  --><link type="text/css" href="css/zTreeStyle.css" rel="stylesheet" /><link type="text/css" href="css/demo.css" rel="stylesheet" /><!--相关功能代码  --><script type="text/javascript">//异步树相关配置var setting = {showLine : true,checkable : false};var zNodes;$.ajax( {url : "tree",type : 'post',global : false, //Ajax的范围        async : false, //异步执行data : {'userid' : 'ceshi'},success : function(data) {alert("相关数据信息 " + data);zNodes = eval(data);},error : function(data) {alert("请求失败 ");}});function addDiyDom(treeId, treeNode) {var spaceWidth = 5;var switchObj = $("#" + treeNode.tId + "_switch"), icoObj = $("#"+ treeNode.tId + "_ico");switchObj.remove();icoObj.before(switchObj);if (treeNode.level > 1) {var spaceStr = "<span style='display: inline-block;width:"+ (spaceWidth * treeNode.level) + "px'>__tag_55$101_";switchObj.before(spaceStr);}}function beforeClick(treeId, treeNode) {if (treeNode.level == 0) {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.expandNode(treeNode);return false;}return true;}$(document).ready(function() {var treeObj = $("#treeDemo");$.fn.zTree.init(treeObj, setting, zNodes);});</script><style type="text/css">.ztree * {font-size: 10pt;font-family: "Microsoft Yahei", Verdana, Simsun, "Segoe UI Web Light","Segoe UI Light", "Segoe UI Web Regular", "Segoe UI","Segoe UI Symbol", "Helvetica Neue", Arial}.ztree li ul {margin: 0;padding: 0}.ztree li {line-height: 30px;}.ztree li a {width: 200px;height: 30px;padding-top: 0px;}.ztree li a:hover {text-decoration: none;background-color: #E7E7E7;}.ztree li a span.button.switch {visibility: hidden}.ztree.showIcon li a span.button.switch {visibility: visible}.ztree li a.curSelectedNode {background-color: #D4D4D4;border: 0;height: 30px;}.ztree li span {line-height: 30px;}.ztree li span.button {margin-top: -7px;}.ztree li span.button.switch {width: 16px;height: 16px;}.ztree li a.level0 span {font-size: 150%;font-weight: bold;}.ztree li span.button {background-image: url("img/left_menuForOutLook.png"); *background-image: url("img/left_menuForOutLook.gif")}.ztree li span.button.switch.level0 {width: 20px;height: 20px}.ztree li span.button.switch.level1 {width: 20px;height: 20px}.ztree li span.button.noline_open {background-position: 0 0;}.ztree li span.button.noline_close {background-position: -18px 0;}.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}</style></head><body><div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div></body></html>