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

淡淡的烟草味﹌ 2023-10-18 23:56 8阅读 0赞

效果截图：

![Center][]

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>
    		
    		<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>
    		
    		<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>

[Center]: https://img-blog.csdn.net/20130814102441953?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center