ztree学习与使用

最新推荐文章于 2024-07-16 10:23:26 发布

IT编程猿

最新推荐文章于 2024-07-16 10:23:26 发布

阅读量823

点赞数

分类专栏：开发插件使用文章标签： ztree

本文链接：https://blog.csdn.net/maojycom/article/details/45932963

版权

开发插件使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1，下载ztree

到官网下载：http://www.ztree.me/v3/main.php#_zTreeInfo，

或从：http://download.csdn.net/detail/maojycom/8730095下载。

2，解压到项目中，并在页面引用使用

<link rel="stylesheet" href="<%=path %>/jsp/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
		<script type="text/javascript" src="<%=path %>/jsp/ztree/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="<%=path %>/jsp/ztree/jquery.ztree.core-3.5.js"></script>
		<style type="text/css">
			body{min-height:400px;}
		</style>
		<script type="text/javascript">
			var setting = 
				{
				async: {
					enable: true,
					url:"<%=path%>/servlet/TreeInfoServlet",
					autoParam:["cid"],
					dataFilter: filter
					},
				data:{
					simpleData:{
						enable:true,
						idKey:"cid",
						pIdKey:"pId",
						rootPid:0
					}
				},
				//回调函数	
				callback:{
					//点击事件
					onClick:function(event, treeId, treeNode){
						  //alert(treeNode.tId + ", " + treeNode.name);
						  window.open("find.action?cid="+treeNode.cid);
					}
				}
				};
			
			//对节点的name进行了修改
			function filter(treeId, parentNode, childNodes) {
				if (!childNodes) return null;
				for (var i=0, l=childNodes.length; i<l; i++) {
					childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
				}
				return childNodes;
			}
			
			//初始化ztree
			$(document).ready(function(){
				$.fn.zTree.init($("#cataTree"), setting);
			});
	    </script>
	</head>
	<body>
		<div>
			<ul id="cataTree" class="ztree"></ul>
		</div>
	</body>

以上是简单的使用，具体的使用参考文档。

3，后台代码中获取数据并返回给前台解析

package com.demo.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.demo.utils.JdbcUtils;
import com.demo.utils.StringUtils;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

/**
 * 首页点击异步加载数据
 */
public class TreeInfoServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	Connection conn;
	PreparedStatement pstm = null;
	ResultSet rs = null;
	
	/**
	 * 通过父级id来查找其下的子节点的集合
	 * @param pid
	 * @return jsonString
	 */
	public String getNodesInfo(Integer pid){
		JdbcUtils jdbcUtils = new JdbcUtils();
		conn = jdbcUtils.getConnection();
		String sql = "select cid,pid,name,isLeaf from medclass where 1=1 and pid = ?";
		String jsonString = null;
		try {
			pstm = conn.prepareStatement(sql);
			if(pid == null){
				pstm.setInt(1, 0);
			}else{
				pstm.setInt(1, pid);
			}
			rs = pstm.executeQuery();
			JSONArray jsonArray = new JSONArray();
			while (rs.next()) {
				JSONObject jsonObject = new JSONObject();
				jsonObject.put("cid", rs.getInt("cid"));
				jsonObject.put("pId", rs.getString("pid"));
				jsonObject.put("name", rs.getString("name"));
				jsonObject.put("isLeaf", rs.getInt("isLeaf"));
				jsonObject.put("isParent", rs.getInt("isLeaf"));
				jsonArray.add(jsonObject);
			}
			jsonString = jsonArray.toJSONString();
		} catch (SQLException e) {
			e.printStackTrace();
		} finally{
			jdbcUtils.close(rs, pstm, conn);
		}
		return jsonString;
	}
	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		Integer pid = null;
		response.setContentType("text/plain");
		//response.setContentType("text/json; charset=UTF-8");  
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		//String pId = request.getParameter("pId");
		String pId = request.getParameter("cid");
		//System.out.println("id:"+pId);
		if(!StringUtils.isNullStr(pId) || "0".equals(pId)){
			pid = null;
		}else{
			pid = Integer.valueOf(pId);
		}
		String nodesInfo = getNodesInfo(pid);
		//System.out.println("json:"+nodesInfo);
		out.print(nodesInfo);
	}
	
}