Home > Developer > JavaScript
This tree is implemented using the zTree plug-in! The Code is as follows:
Page code:
Jsp code
<% @ Page language = "java" 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> jQuery Tree </title>
<Link rel = "stylesheet" href = "zTree/demoStyle/demo.css" type = "text/css">
<Link rel = "stylesheet" href = "zTree/zTreeStyle/zTreeStyle.css" type = "text/css">
<Script type = "text/javascript" src = "zTree/jquery-1.4.2.js"> </script>
<Script type = "text/javascript" src = "zTree/jquery. ztree-2.6.js"> </script>
<Script language = "JavaScript">
Var zTree1;
Var setting = {
Checkable: false,
Async: true,
AsyncUrl: "Tree", // URL for retrieving node data
AsyncParam: ["name", "id"], // required data name for obtaining node data, such as id and name
AsyncParamOther: ["test", "true"], // other parameters (key, value key-value Pair format)
Callback :{
Click: function (event, treeId, treeNode ){
// ZTree1.expandNode (treeNode, true, false );
},
Expand: function (event, treeId, treeNode ){
},
Collapse: function (event, treeId, treeNode ){
}
}
};
Function refreshTree (){
ZTree1 = $ ("# treeDemo"). zTree (setting );
}
$ (Document). ready (function (){
RefreshTree ();
});
</SCRIPT>
</HEAD>
<BODY>
<Ul id = "treeDemo" class = "tree" style = "height: 500px; width: 300px;"> </ul>
</BODY>
</HTML>
<% @ Page language = "java" 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> jQuery Tree </title>
<Link rel = "stylesheet" href = "zTree/demoStyle/demo.css" type = "text/css">
<Link rel = "stylesheet" href = "zTree/zTreeStyle/zTreeStyle.css" type = "text/css">
<Script type = "text/javascript" src = "zTree/jquery-1.4.2.js"> </script>
<Script type = "text/javascript" src = "zTree/jquery. ztree-2.6.js"> </script>
<Script language = "JavaScript">
Var zTree1;
Var setting = {
Checkable: false,
Async: true,
AsyncUrl: "Tree", // URL for retrieving node data
AsyncParam: ["name", "id"], // required data name for obtaining node data, such as id and name
AsyncParamOther: ["test", "true"], // other parameters (key, value key-value Pair format)
Callback :{
Click: function (event, treeId, treeNode ){
// ZTree1.expandNode (treeNode, true, false );
},
Expand: function (event, treeId, treeNode ){
},
Collapse: function (event, treeId, treeNode ){
}
}
};
Function refreshTree (){
ZTree1 = $ ("# treeDemo"). zTree (setting );
}
$ (Document). ready (function (){
RefreshTree ();
});
</SCRIPT>
</HEAD>
<BODY>
<Ul id = "treeDemo" class = "tree" style = "height: 500px; width: 300px;"> </ul>
</BODY>
</HTML>
Java code:
Java code
Package com;
Import java. io. IOException;
Import java. io. PrintWriter;
Import javax. servlet. ServletException;
Import javax. servlet. http. HttpServlet;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
@ SuppressWarnings ("serial ")
Public class Tree extends HttpServlet {
Public void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
This. doPost (request, response );
}
Public void doPost (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
Try {
String pId = request. getParameter ("id ");
String pName = request. getParameter ("name ");
// Delay for loading to display
For (int I = 0; I <9999; I ++ ){}
// Construct the data, which can be queried from the database
String str = "[";
If (pId = null | pName = null ){
PId = "0 ";
PName = "";
Str + = "{'id': 'root', 'name': 'root node', 'icon ':'" + request. getContextPath () + "/zTree/logout.jpg ', 'isparent': true },";
} Else {
For (int I = 1; I <3; I ++ ){
String nId = pId + I;
String nName = nId;
Str + = "{'id': '" + nId + "', 'name': '" + nName + "', 'icon ':'' "+ ", 'isparent': "+ (I % 2 = 0? False: true) + "},";
}
}
Str = str. substring (0, str. length ()-1) + "]";
Reponse (request, response, str );
} Catch (Exception e ){
E. printStackTrace ();
}
}
Public void reponse (HttpServletRequest request, HttpServletResponse response, Object msg) throws Exception {
Response. setContentType ("text/plain ");
Response. setCharacterEncoding ("UTF-8 ");
PrintWriter out = response. getWriter ();
Out. write (msg. toString ());
Out. flush ();
Out. close ();
}
}
Package com;
Import java. io. IOException;
Import java. io. PrintWriter;
Import javax. servlet. ServletException;
Import javax. servlet. http. HttpServlet;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
@ SuppressWarnings ("serial ")
Public class Tree extends HttpServlet {
Public void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
This. doPost (request, response );
}
Public void doPost (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
Try {
String pId = request. getParameter ("id ");
String pName = request. getParameter ("name ");
// Delay for loading to display
For (int I = 0; I <9999; I ++ ){}
// Construct the data, which can be queried from the database
String str = "[";
If (pId = null | pName = null ){
PId = "0 ";
PName = "";
Str + = "{'id': 'root', 'name': 'root node', 'icon ':'" + request. getContextPath () + "/zTree/logout.jpg ', 'isparent': true },";
} Else {
For (int I = 1; I <3; I ++ ){
String nId = pId + I;
String nName = nId;
Str + = "{'id': '" + nId + "', 'name': '" + nName + "', 'icon ':'' "+ ", 'isparent': "+ (I % 2 = 0? False: true) + "},";
}
}
Str = str. substring (0, str. length ()-1) + "]";
Reponse (request, response, str );
} Catch (Exception e ){
E. printStackTrace ();
}
}
Public void reponse (HttpServletRequest request, HttpServletResponse response, Object msg) throws Exception {
Response. setContentType ("text/plain ");
Response. setCharacterEncoding ("UTF-8 ");
PrintWriter out = response. getWriter ();
Out. write (msg. toString ());
Out. flush ();
Out. close ();
}
}
This blog did this demo because it was proposed by netizens. This is also based on a rewrite in the zTree example. If you are interested in this plug-in, read the source code, examples, and api documentation carefully!
Author: "The bitterness after 80"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
