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

最新推荐文章于 2021-03-17 04:15:10 发布

在奋斗的大道

最新推荐文章于 2021-03-17 04:15:10 发布

阅读量1.1k

点赞数

分类专栏： Jquery(功能篇)

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/9960295

版权

Jquery(功能篇) 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

效果截图：

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;

	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		// 上传参数：用户Id
		String 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";
		// 添加部门Id
		List<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();

		}

	}

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(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>

在奋斗的大道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(Jquery 功能篇) Jquery Z_tree异步树加载实例代码

效果截图：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;impo
复制链接

扫一扫

专栏目录