用樹展示上下級關係-jquery+ztree+json的運用
阿新 • • 發佈：2019-01-03
本文是結合前面對fastjson的處理後，在此基礎上來用樹的形式展示後臺資料
如圖所示：
採用了開源的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();
}
}
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>