用树展示上下级关系-jquery+ztree+json的运用

本文是结合前面对fastjson的处理后，在此基础上来用树的形式展示后台数据

如图所示：



采用了开源的ztree技术。具体参考：

http://www.oschina.net/p/ztree
因为ztree的格式支持Json，所以我们就新建了一个Node类【TreeNode.java】

/**
* TreeNode.java
* 版权所有(C) 2012
* 创建:cuiran 2012-06-12 15:37:40
*/
package com.fastjson.test;

/**
* TODO
* @author cuiran
* @version TODO
*/
public class TreeNode {
private Integer id;
private Integer pId;
private String name;
private Boolean checked;
private Boolean open;
/**
* @return the id
*/
public Integer getId() {
return id;
}
/**
* @param id the id to set
*/
public void setId(Integer id) {
this.id = id;
}
/**
* @return the pId
*/
public Integer getPId() {
return pId;
}
/**
* @param id the pId to set
*/
public void setPId(Integer id) {
pId = id;
}
/**
* @return the name
*/
public String getName() {
return name;
}
/**
* @param name the name to set
*/
public void setName(String name) {
this.name = name;
}
/**
* @return the checked
*/
public Boolean isChecked() {
return checked;
}
/**
* @param checked the checked to set
*/
public void setChecked(Boolean checked) {
this.checked = checked;
}
/**
* @return the open
*/
public Boolean isOpen() {
return open;
}
/**
* @param open the open to set
*/
public void setOpen(Boolean open) {
this.open = open;
}
public TreeNode(Integer id, Integer pId, String name, Boolean checked, Boolean open) {
super();
this.id = id;
this.pId = pId;
this.name = name;
this.checked = checked;
this.open = open;
}
public TreeNode() {
super();
}

}

新建一个TreeServlet【TreeServlet.java】

package com.fastjson.test;
import java.io.IOException;
import java.io.PrintWriter;
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.alibaba.fastjson.JSON;

public class TreeServlet extends HttpServlet {

/**
* Constructor of the object.
*/
public TreeServlet() {
super();
}

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doPost(request, response);
}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

TreeNode node1=new TreeNode(1,0,"北京市",false,true);
TreeNode node2=new TreeNode(2,1,"朝阳区",false,true);
TreeNode node3=new TreeNode(3,1,"海淀区",false,true);

TreeNode node4=new TreeNode(4,0,"湖北省",false,true);
TreeNode node5=new TreeNode(5,4,"武汉市",false,true);
TreeNode node6=new TreeNode(6,4,"襄阳市",false,true);

List<TreeNode> list=new ArrayList<TreeNode>();
list.add(node1);
list.add(node2);
list.add(node3);
list.add(node4);
list.add(node5);
list.add(node6);

String jsonString = JSON.toJSONString(list);
System.out.println("调用后台:"+jsonString);
out.println(jsonString);
out.flush();
out.close();
}

/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}

}

网页代码【tree.jsp】

<%@ 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 HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'tree.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.2.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.2.js"></script>

<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};

var zNodes ;

var code;

function setCheck() {

var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
type = { "Y":py + sy, "N":pn + sn};
zTree.setting.check.chkboxType = type;
showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
}
function showCode(str) {
if (!code) code = $("#code");
code.empty();
code.append("<li>"+str+"</li>");
}

function fuzhi(data){

zNodes=eval("("+data+")");

$.fn.zTree.init($("#treeDemo"), setting, zNodes);

setCheck();
$("#py").bind("change", setCheck);
$("#sy").bind("change", setCheck);
$("#pn").bind("change", setCheck);
$("#sn").bind("change", setCheck);

}

$(document).ready(function(){

$.get("http://localhost:8090/Test/servlet/tree",function(data){

$('#result').text(data);//直接展示JSON数据
fuzhi(data);

});

});
//-->
</SCRIPT>
</head>

<body >
This is my JSP page. <br>
<div  id="result">
</div>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、setting 配置信息说明</h2>
<ul class="list">
<li class="highlight_red">使用 checkbox，必须设置 setting.check 中的各个属性，详细请参见 API 文档中的相关内容</li>
<li><p>父子关联关系：<br/>
被勾选时：<input type="checkbox" id="py" class="checkbox first" checked /><span>关联父</span>
<input type="checkbox" id="sy" class="checkbox first" checked /><span>关联子</span><br/>
取消勾选时：<input type="checkbox" id="pn" class="checkbox first" checked /><span>关联父</span>
<input type="checkbox" id="sn" class="checkbox first" checked /><span>关联子</span><br/>
<ul id="code" class="log" style="height:20px;"></ul>
</p>
</li>
</ul>
</li>
<li class="title"><h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">1)、如果需要初始化默认节点被勾选，请设置 treeNode.checked 属性，详细请参见 API 文档中的相关内容</li>
<li class="highlight_red">2)、如果某节点禁用 checkbox，请设置 treeNode.chkDisabled 属性，详细请参见 API 文档中的相关内容 和 'chkDisabled 演示'</li>
<li class="highlight_red">3)、如果某节点不显示 checkbox，请设置 treeNode.nocheck 属性，详细请参见 API 文档中的相关内容 和 'nocheck 演示'</li>
<li class="highlight_red">4)、如果更换 checked 属性，请参考 API 文档中 setting.data.key.checked 的详细说明</li>
<li>5)、其他请参考 API 文档中 treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus 的详细说明</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

下载地址：http://vdisk.weibo.com/s/bVYEF