JQuery zTree for loading tree menus, jqueryztree

JQuery zTree for loading tree menus, jqueryztree

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.

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 parameters:Setting

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

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

Because there are too many parameters, see zTreeAPI for details.

Core parameters: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

<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"><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 zookeeper (ztreestyle.css) is a zTree style css file. Only by introducing this file can we present a tree structure style,

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, this is necessary,

4), the last (js/jquery. ztree. excheck-3.5.min.js) is to expand the file, mainly used for single-choice and check box function, because the use of the check box, so also need to introduce.

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: {beforeClick: 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-- Node data loading, with a tree structure

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

<body> <div class="zTreeDemoBackground left">  <ul id="user_tree" class="ztree" style="border: 1px solid #617775;overflow-y: scroll;height: 500px;"></ul> </div></body>

2) load 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 <nodes. length; I ++) {v + = nodes [I]. name + ","; alert (nodes [I]. id); // obtain the value of the selected node }}

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: POST dataType: 'json ', // Data Transmission Format: json url: $ ('# 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 id private 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 <TreeVO> 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!

Articles you may be interested in:

• Jquery zTree asynchronous loading simple instance sharing
• Jquery ztree uses json data in the drop-down tree.
• 8 jQuery lightweight Tree plug-ins are recommended
• Learn how to create a tree network using the jQuery plug-in EasyUI (1)
• Learn how to create a tree menu by using the jQuery plug-in EasyUI
• Introduction to JQuery ztree asynchronous loading instance
• How to filter and asynchronously load an instance using JQuery ztree
• Simple Example of jquery zTree asynchronous loading
• Asynchronous loading of Jquery zTree controls