(Jquery 功能篇) Jquery Z_tree异步树加载实例代码
符号
阅读：597
2021-04-01 10:21:24
评论：0
效果截图：
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>
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
