Jquery zTree Demo Summary

Preface:
Recently, zTree needs to be used, so I want to summarize the zTree. There has been no time to summarize it some time ago. Let's take a look at the time remaining for the National Day. The zTree control is based on Jquery and provides good API documentation and demos.

1. Help documentation and APIs
ZTree's help documentation and APIs are comprehensive, but some demos are written in PHP at the backend. Therefore, if you want to see a more comprehensive Demo, it is best to publish the Help Group document to the local Apache server.
2. Use a Demo to demonstrate the Jquery zTree Function
Key points:
2.1 The data source of the zTree tree is in JSON format.
2.2 The information of the zTree control is dynamically loaded through the request url.
2.3 The onClick function of the zTree. After clicking any node in the treeWill call
3. Demo
3.1 page layout
To fully demonstrate the zTree function, the layout is roughly as follows: the left side is the tree row structure, and the right side is the homepage.

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

In order not to pollute the original static page, we encapsulate the index. jsp file in the index. js file. The Code is as follows: (Note)




/*** Set zTree */var setting = {async: {enable: true, url: getUrlByNodeId}, check: {enable: false}, data: {simpleData: {enable: true }}, view: {expandSpeed: ""}, callback: {beforeExpand: beforeExpand, response: onAsyncSuccess, onAsyncError: onAsyncError, onClick: zTreeOnClick }}; var zNodes = [{name: "Classic video retrieval", id: "1", isParent: true, iconOpen: "zTree/css/zTreeStyle/img/diy/javasopen.png ", iconClose: "zTree/css/zT ReeStyle/img/diy/export close.png "}, {name:" Content-based retrieval ", id:" 2 ", isParent: true, iconOpen: "zTree/css/zTreeStyle/img/diy/javasopen.png", iconClose: "zTree/css/zTreeStyle/img/diy/javasclose.png"}, {name: "semantic-based retrieval ", id: "3", isParent: true, iconOpen: "zTree/css/zTreeStyle/img/diy/javasopen.png", iconClose: "zTree/css/zTreeStyle/img/diy/eclipclose.png"}];/*** @ author ZhengHaibo * function: Obtain the node's child node through NodeId * call: when the parent node is expanded, it is called and the child node * background data grid of the parent node is returned. Format: JSON * @ param treeId tree control Id * @ param treeNode tree Node object: Contains Id and other information * @ return */function getUrlByNodeId (treeId, treeNode) {return "getNodesDataById? TreeNodeId = "+ treeNode. id;}/*** expand the previously executed function * @ param treeId * @ param treeNode * @ return */function beforeExpand (treeId, treeNode) {if (! TreeNode. isAjaxing) {ajaxGetNodes (treeNode, "refresh"); return true;} else {alert ("Loading... "); return false ;}} /*** the function executed after loading successfully * @ param event encapsulates js events * @ param treeId tree control Id * @ param treeNode tree Node object * @ param msg returned JSON message format * @ return */function onAsyncSuccess (event, treeId, treeNode, msg) {console. log ("treeId"); console. log (treeId); console. log ("treeNode"); console. log (treeNode); console. log ("msg" ); Console. log (msg); if (! Msg | msg. length = 0) {return;} var zTree = $. fn. zTree. getZTreeObj ("treeDemo"); treeNode. icon = ""; zTree. updateNode (treeNode); // update the tree structure zTree. selectNode (treeNode. children [0]); // set it to the selected state for the first subnode} function onAsyncError (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {var zTree = $. fn. zTree. getZTreeObj ("treeDemo"); alert ("Error! An error occurred while retrieving data asynchronously. "); treeNode. icon = ""; zTree. updateNode (treeNode);} function ajaxGetNodes (treeNode, reloadType) {var zTree = $. fn. zTree. getZTreeObj ("treeDemo"); if (reloadType = "refresh") {treeNode. icon = "zTree/css/zTreeStyle/img/loading.gif"; zTree. updateNode (treeNode);} zTree. reAsyncChildNodes (treeNode, reloadType, true);}/*** function: When you click a tree node, call this function * @ param event * @ param treeId * @ param treeNode * @ return */ Function zTreeOnClick (event, treeId, treeNode) {console. log ("zTreeOnClickLog: --------------------------------") console. log (treeId); console. log (treeNode); console. log (treeNode. id); switch (treeNode. id + "") {// identify case "1": case "11": document. getElementById ("iframepage "). src = "tree_click_page.jsp? TreeNodeId = "+ treeNode. id; break; case" 12 ": document. getElementById (" iframepage "). src =" tree_click_page.jsp? TreeNodeId = "+ treeNode. id; break; case" 13 ": document. getElementById (" iframepage "). src =" tree_click_page.jsp? TreeNodeId = "+ treeNode. id; break; case" 2 ": case" 21 ": document. getElementById (" iframepage "). src =" tree_click_page.jsp? TreeNodeId = "+ treeNode. id; break; case" 22 ": document. getElementById (" iframepage "). src =" tree_click_page.jsp? TreeNodeId = "+ treeNode. id; break; case" 23 ": document. getElementById (" iframepage "). src =" tree_click_page.jsp? TreeNodeId = "+ treeNode. id; break; case" 24 ": document. getElementById (" iframepage "). src =" tree_click_page.jsp? TreeNodeId = "+ treeNode. id; break; case" 3 ": case" 31 ": document. getElementById (" iframepage "). src =" tree_click_page.jsp? TreeNodeId = "+ treeNode. id; break; }}$ (document ). ready (function () {$. fn. zTree. init ($ ("# treeDemo"), setting, zNodes); // initialize zTree });


3.2 background

The Struts2 framework is used in the background. The Action is set in the struts. xml file, and data in different JSON formats is returned based on the different ID numbers of the front-end nodes.




/** $ Filename: ZTreeDemoAction. java, v $ * $ Date: Sep 27,201 3 $ * Copyright (C) ZhengHaibo, Inc. all rights reserved. * This software is Made by Zhenghaibo. */package edu. njupt. zhb. ztree. action; import java. io. IOException; import java. io. printWriter; import javax. servlet. http. httpServletResponse; import org. apache. struts2.ServletActionContext; import com. opensymphony. xwork2.ActionSupport;/** @ author: ZhengHaibo * web: http://blog.csdn.net/nuptboyzhb * mail: zhb931706659@126.com * Sep 27,201 3 Nanjing, njupt, china */public class ZTreeDemoAction extends ActionSupport {/***/private static final long serialVersionUID =-3318989776253565435L; private int treeNodeId; // save the tree node Id/*** return the Json format data of the tree's root node * @ return */public String getNodesDataById () {System. out. println ("treeNodeId =" + treeNodeId); String iconPath = ", icon: \" zTree/css/zTreeStyle/img/diy/3.png \ ""; String icon2Path = ", icon: \ "zTree/css/zTreeStyle/img/diy/2.png \" "; String icon9Path =", icon: \ "zTree/css/zTreeStyle/img/diy/9.png \" "; String lookIconPath =", icon: \ "zTree/css/zTreeStyle/img/diy/8.png \" "; String nodesJson =" "; if (treeNodeId = 1) {nodesJson =" [{id: 11, pId: "+ treeNodeId +", name: \ "integrated search \", isParent: false "+ iconPath +"}, "+" {id: 12, pId: "+ treeNodeId +", name: \ "video time \", isParent: false "+ iconPath +"}, "+" {id: 13, pId: "+ treeNodeId +", name: \ "video location \", isParent: false "+ iconPath +"} "+"] ";} else if (treeNodeId = 2) {nodesJson = "[{id: 21, pId:" + treeNodeId + ", name: \" generate Index \ ", isParent: false" + icon2Path + "}, "+" {id: 22, pId: "+ treeNodeId +", name: \ "Upload image \", isParent: false "+ iconPath + "}, "+" {id: 23, pId: "+ treeNodeId +", name: \ "image URL \", isParent: false "+ iconPath + "}, "+" {id: 24, pId: "+ treeNodeId +", name: \ "View index \", isParent: false "+ lookIconPath +"} "+"] ";} else if (treeNodeId = 3) {nodesJson =" [{id: 31, pId: "+ treeNodeId + ", name: \ "semantic search \", isParent: false "+ icon9Path +"}] ";} else {nodesJson =" [] "; // other situations: the parent node does not have a subnode} getPrintWriter (). write (nodesJson); return SUCCESS;}/*** get the HttpServletResponse object * @ return */public static HttpServletResponse getResponse () {HttpServletResponse response = ServletActionContext. getResponse (); response. setContentType ("text/html; charset = UTF-8"); return response;} public PrintWriter getPrintWriter () {PrintWriter pw = null; try {pw = getResponse (). getWriter ();} catch (IOException e) {e. printStackTrace ();} return pw;} public int getTreeNodeId () {return treeNodeId;} public void setTreeNodeId (int treeNodeId) {this. treeNodeId = treeNodeId ;}}


4. Page Effects