zTree+Json

最近看了点zTree的知识只能算入门吧,自己也汇总了下不同的方式。下面提供zTree源代码和自己的小列子希望对大家都帮助。

1.Servlet代码

package com.servlet.servlet;

import java.io.IOException;
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 net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.servlet.bean.User;
import com.servlet.main.JSONMain;
import com.servlet.util.TreeView;

public class UserServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		
		
		
		super.doGet(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse respone)
			throws ServletException, IOException {
		
		List<User> list = new ArrayList<User>();
		
		List<TreeView> treeList = new ArrayList<TreeView>();

		User u1 = new User();
		u1.setUserID(1);
		u1.setPreID(0);
		u1.setUrl("");
		u1.setName("祥");
		u1.setPassword("zl123456");
		u1.setSex("男");
		
		User u2 = new User();
		u2.setUserID(2);
		u2.setPreID(1);
		u2.setUrl("login.jsp");
		u2.setName("夏娟");
		u2.setPassword("zl98765");
		u2.setSex("女");
		
		User u3 = new User();
		u3.setUserID(3);
		u3.setPreID(1);
		u3.setUrl("login.jsp");	
		u3.setName("琳琳");
		u3.setPassword("zl98765");
		u3.setSex("女");

		User u4 = new User();
		u4.setUserID(3);
		u4.setPreID(1);
		u4.setUrl("login.jsp");	
		u4.setName("曼雪");
		u4.setPassword("zl98765");
		u4.setSex("女");
		
		list.add(u1);
		list.add(u2);
		list.add(u3);
		list.add(u4);
		
		for(User u : list){
			TreeView treeView = new TreeView();
			treeView.setId(u.getUserID());
			treeView.setName(u.getName());
			treeView.setpId(u.getPreID());
			treeView.setUrl(u.getUrl());
			//treeView.setIsParent(true);
			treeList.add(treeView);
			
		}
		
		
		//JSONObject jObject = JSONMain.getJsonFromList(treeList);
		JSONArray jObject = JSONArray.fromObject(treeList);
		System.out.println(jObject);
		respone.setContentType("text/plain; charset=UTF-8");
		respone.setCharacterEncoding("UTF-8");
		respone.getWriter().write(jObject.toString());
		//respone.encodeUrl("UTF-8");
		//respone.getWriter().write("[{\"demoData\":\"This Is The JSON Data\"}]");
		//respone.sendRedirect("index.jsp");
		//request.getRequestDispatcher(request.getContextPath()+"/index.jsp").forward(request, respone);
	}

	@Override
	/**
	 * 销毁
	 */
	public void destroy() {
		
		super.destroy();
	}

	@Override
	/**
	 * 初始化
	 */
	public void init() throws ServletException {
		// TODO Auto-generated method stub
		super.init();
	}

	
	
	
}




2.TreeView工具类

package com.servlet.util;

import java.util.List;

public class TreeView {

	private Integer id;
	private Integer pId;
	private String url;
	private String name;
	//private Boolean isParent;
	private List<TreeView> nodes;

	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public Integer getpId() {
		return pId;
	}
	public void setpId(Integer id) {
		pId = id;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public List<TreeView> getNodes() {
		return nodes;
	}
	public void setNodes(List<TreeView> nodes) {
		this.nodes = nodes;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	/*public Boolean getIsParent() {
		return isParent;
	}
	public void setIsParent(Boolean isParent) {
		this.isParent = isParent;
	}*/
	
	
}




3.发起请求页面获取

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	
	<script src="<%=path%>/js/jquery-1.4.4.min.js" type="text/javascript"></script>	
	<script src="<%=path%>/js/jquery.ztree.core-3.4.js" type="text/javascript"></script>	
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/zTreeStyle/zTreeStyle.css"></link>
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/demo.css"></link>
	<script type="text/javascript" src="<%=path%>/js/jquery.ztree.excheck-3.4.js" ></script>
	
	<script type="text/javascript">
		
		function setFontCss(treeId, treeNode) {
			return treeNode.level == 1 ? {color:"red"} : {};
		};
		
		
		var setting = {
			check: {
				enable: true//启动多选框记得导入jquery.ztree.excheck-3.4.js 
			},
			
			data: {
				simpleData: {
					enable: true,//如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId,并且让数据满足父子关系。
					idKey: "id",
					pIdKey: "pId",
					rootPId: 1
				}
			},
						
			
			view: {
				showLine: false,//显示连接线
				showIcon: true,//显示节点图片
				//fontCss: {color:"red"}
				fontCss: setFontCss//节点颜色
			},
			
			async: {	//ztree异步请求数据
				enable: true,
				url: "login",//请求action方法
				autoparam:["id"]
			}
		};
		
		$(function($){
			/**	
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			alert("treeObj  :  "+treeObj);
			var nodes = treeObj.getSelectedNodes();
			alert("nodes    :  "+nodes);
			if (nodes.length>0) {
				treeObj.reAsyncChildNodes(nodes[0], "refresh");
			}
			
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getNodes();
			if (nodes.length>0) {
				nodes[0].name = "test";
				treeObj.updateNode(nodes[0]);
				
			}
			*/
			alert(1);
			$.fn.zTree.init($("#treeDemo"), setting);
		});
		
	</script>
	
  </head>
  
  <body>	
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree">			
			</ul>
		</div>
  </body>
</html>



总结:上面列子只是简单的实例官网也有,不过zTree自从更新到3.4之后和之前的zTree版本有些不同在看文档时一定要看相应的版本文档不然纠结的很!zTree功能很强大可以深入学习哦!

你可能感兴趣的:(ztree)