Construct a tree instance based on jquery + ztree + java to obtain json data

Ztree is using JQuery's core code to implement a tree plug-in that accomplishes most of the most common functions.

Compatible with IE, FireFox, Chrome and other browsers
Multiple tree instances can be generated in one page at a time
Support for JSON data
Supports one-time static generation and Ajax asynchronous loading in two ways
Support for multiple event responses and feedback
Nodes that support tree move, edit, delete
Support any change of skin/personalized icon (depending on CSS)
Supports extremely flexible checkbox or radio selection features
Simple parameter configuration to realize flexible and changeable function
Because the Ztree format supports JSON, we create a new node class "Treenode.java"

/**
* Treenode.java
* All rights Reserved (C) 2012
* Created: 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 ();
}

}
Create a new 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 is called when a form has it 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 is called when a form, has its tag value, 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, "Beijing", False,true);
TreeNode node2=new TreeNode (2,1, "Chaoyang District", False,true);
TreeNode node3=new TreeNode (3,1, "Haidian", false,true);

TreeNode node4=new TreeNode (4,0, "Hubei province", false,true);
TreeNode node5=new TreeNode (5,4, "Wuhan City", False,true);
TreeNode node6=new TreeNode (6,4, "Xiangyang City", 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 ("Call Backstage:" +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
}

}

Web page code "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" >
<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 are 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":p y + sy, "n":p n + 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);//show JSON data directly
Fuzhi (data);

});

});
-->
</SCRIPT>

<body >
This is the 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" ><ul class= "List" >
<li class= "highlight_red" > Use a checkbox, you must set each property in Setting.check, see the relevant content in the API documentation for details </li>
<li><p> Parent-Child Association relationship:<br/>
When checked: <input type= "checkbox" id= "py" class= "checkbox a" checked/><span> associated parent </span>
<input type= "checkbox" id= "sy" class= "checkbox a" checked/><span> associated child </span><br/>
When unchecked: <input type= "checkbox" id= "pn" class= "checkbox a" checked/><span> associated parent </span>
<input type= "checkbox" id= "sn" class= "checkbox a" checked/><span> associated child </span><br/>
<ul id= "code" class= "Log" style= "height:20px;" ></ul>
</p>
</li>
</ul>
</li>
<li class= "title" ><ul class= "List" >
<li class= "highlight_red" >1), if you need to initialize the default node is checked, set the Treenode.checked property, please see the relevant content in the API documentation </li>
<li class= "highlight_red" >2), if a node disables a checkbox, set the Treenode.chkdisabled property, see the relevant content in the API documentation and ' chkdisabled demo ' in detail </li>
<li class= "highlight_red" >3), if a node does not display a checkbox, set the Treenode.nocheck property, see the relevant content in the API documentation, and ' Nocheck demo ' </li >
<li class= "highlight_red" >4), if the checked attribute is replaced, refer to the setting.data.key.checked in the API documentation for detailed instructions </li>
&LT;LI&GT;5), please refer to Treenode.checkedold/getcheckstatus/check_child_state/check_focus in the API documentation for more information </li>
</ul>
</li>
</ul>
</div>
</body>