JQuery + zTree loading tree structure menu

JQuery + zTree loading tree structure menu

Because the tree menu function needs to be designed in the project, Baidu looked for relevant information and found a lot of zTree information. I think it is quite good, and zTree also has an official API document, which is very detailed, after some time, I finally got it out, so I wrote it down, which is a summary of zTree learning.

ZTree introduction:

1. zTree uses JQuery's core code to implement a set of Tree plug-ins that can complete most common functions.
2. zTree v3.0 separates the core code by function. You do not need to load unnecessary code.
3. Using the delayed loading technology, tens of thousands of nodes can be easily loaded, even in IE6, the second kill can be basically achieved
4. compatible with IE, FireFox, Chrome, Opera, Safari, and other browsers
5. Support for JSON data
6. Support static and Ajax asynchronous loading of node data
7. Supports any skin replacement/custom icons (depending on css)
8. Extremely flexible checkbox or radio Selection
9. Multiple Event Response callbacks
10. flexible editing (add, delete, modify, and query) functions. You can drag and drop nodes at will, or drag multiple nodes.
11. Multiple Tree instances can be generated simultaneously on one page.
12. Simple parameter configuration for flexible and Variable Functions


Core functions and attributes:

Core: zTree (setting, [zTreeNodes])
This function uses a JSON Data Object setting and a JSON Data Object zTreeNodes to create a Tree.

Core parameter: setting
The zTree parameter configuration is completed here. Simply put, the style, event, and access path of the tree are all configured here.

Example of setting:

var setting = { showLine: true, checkable: true }; 

Because there are too many parameters, see zTreeAPI for details.
Core parameter: zTreeNodes
All node data sets of zTree use a data structure composed of JSON objects. Simply put, all information of the tree is saved in Json format.

1. zTree Official Website: http://www.ztree.me/v3/main.php#_zTreeInfo

The source code, instance, and API of zTree can be downloaded from the official website. The author's pdf API is very detailed.
The methods for obtaining node data of zTree are static (directly defined) and dynamic (loading back-end databases ).

Specific configuration steps:

Step 1-introduce related files

 <script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script><script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script><script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

Note:
1st (ztreestyle.css) is the style css file of zTree. This is introduced to present the structure style of the tree,
2, the second (jquery-1.9.1.min.js) is the jQuery file, because to use,
3. The third (jquery. ztree. core-3.5.min.js) is the core js file of zTree, which is required,
4. The last one (js/jquery. ztree. excheck-3.5.min.js) is an extended file, mainly used for single-choice and check box functions, because the check box is used, so it should also be introduced in.

Step 2-related configuration (for detailed configuration, please go to the official website to refer to the detailed API Documentation)

Var zTree; var setting = {view: {dblClickExpand: false, // when you double-click a node, whether to automatically expand the parent node ID showLine: true, // whether to display the connections between nodes fontCss: {'color': 'black', 'font-weight': 'bold '}. // The font Style Function selectedMulti: false // set whether multiple nodes can be selected at the same time}, check: {// chkboxType: {"Y": "ps", "N": "ps"}, chkStyle: "checkbox", // check box type enable: true // whether CheckBox is displayed on each node}, data: {simpleData: {// simple data mode enable: true, idKey: "id", pIdKey: "pId", rootPId: "" }}, callback: {befo ReClick: function (treeId, treeNode) {zTree = $. fn. zTree. getZTreeObj ("user_tree"); if (treeNode. isParent) {zTree. expandNode (treeNode); // if it is a parent node, expand the node} else {zTree. checkNode (treeNode ,! TreeNode. checked, true, true); // click check, and then click uncheck }}}};

Step 3: load node data and display the Tree Structure

1. Put a ul on the html page, and the data will be automatically loaded into the ul element.

2. Loading data in js

I. static mode (directly defined)

Var zNodes = [{id: 1, pId: 0, name: "test 1", open: false}, {id: 11, pId: 1, name: "test 1-1", open: true}, {id: 111, pId: 11, name: "test 1-1-1"}, {id: 112, pId: 11, name: "test 1-1-2"}, {id: 12, pId: 1, name: "test 1-2", open: true},]; $ (document ). ready (function () {$. fn. zTree. init ($ ("# user_tree"), setting, zNodes) ;}); function onCheck (e, treeId, treeNode) {var treeObj = $. fn. zTree. getZTreeObj ("user_tree"), nodes = treeObj. getCheckedNodes (true), v = ""; for (var I = 0; I
 
  
Ii. dynamic mode (loading from the backend database)
  

  
/*** Page initialization */$ (document ). ready (function () {onLoadZTree () ;});/*** load tree data */function onLoadZTree () {var treeNodes; $. ajax ({async: false, // asynchronous cache: false, // whether cache type: 'post' is used, // Request Method: postdataType: 'json ', // Data Transmission Format: jsonurl: $ ('# ctx '). val () + "SendNoticeMsgServlet? Action = loadUserTree ", // request action path error: function () {// request failure processing function alert (', request failed! ');}, Success: function (data) {// console. log (data); // The post-processing function treeNodes = data after successful requests; // assign the simple Json format encapsulated in the background to treeNodes }}); var t = $ ("# user_tree"); t = $. fn. zTree. init (t, setting, treeNodes );}
  
Data Loading Code in the java Background:
  

  
1. Define the VO class of the tree. You do not need to define this class. because I want to use other operations, it is more convenient.
  

  
/*** ZTree tree object VO class ** @ author Administrator **/public class TreeVO {private String id; // node idprivate String pId; // The parent node pId I must be capitalized private String name; // The node name private String open = "false"; // whether to expand the tree node. The public String getId () is not expanded by default () {return id;} public void setId (String id) {this. id = id;} public String getpId () {return pId;} public void setpId (String pId) {this. pId = pId;} public String getName () {return name;} public void setName (String name) {this. name = name;} public String getOpen () {return open;} public void setOpen (String open) {this. open = open ;}}
  

  2. query the database, and the SQL structure field is also in the format of id, pId, name, and open (optional) (Note: The I in the pId must be capitalized ), then encapsulate the result in the TreeVO class.
  

  

  
/*** Load tree data ** @ param request * @ param response * @ throws IOException */public void loadUserTree (HttpServletRequest request, HttpServletResponse response) throws IOException {WeiXinUserService weixinUserService = new WeiXinUserServiceImpl (); List
   
    
User_tree_list = weixinUserService. getUserTreeList (); String treeNodesJson = JSONArray. fromObject (user_tree_list ). toString (); // convert the list to json format and return PrintWriter out = response. getWriter (); // use the Json plug-in to convert Array to Json format out. print (treeNodesJson); // release the resource out. close ();}
   
  


  
The entire operation has been completed here. The organization language is naturally not good because of the poor preparation and writing skills. Sorry! Learn and grow together!