Ztree First Experience (i)--small trial sledgehammer

Ztree is a versatile "tree plugin" that relies on jQuery. The combination of excellent performance, flexible configuration and multiple functions is the biggest advantage of Ztree.

--Ztree official website

• Ztree v3.0 The core code is segmented by functionality, and unwanted code can be used without loading
• Using the lazy loading technology, tens of thousands of nodes easily loaded, even under the IE6 can basically do the second kill
• Compatible with browsers such as IE, FireFox, Chrome, Opera, Safari, etc.
• Support for JSON data
• Supports static and Ajax loading of node data asynchronously
• Supports any skin change/custom icon (depending on CSS)
• Support for extremely flexible checkbox or radio selection functions
• Provides multiple event response callbacks
• Flexible editing (Add/delete/change/check) function, you can drag and drop the node, but also multi-node drag yo
• Multiple Tree instances can be generated at the same time within a page
• Simple parameter configuration for flexible functions

The above features are also from the official website. Due to the project needs, the beginning of contact with Ztree, personal feeling, in fact, its greatest advantage: Ztree is written by the Chinese, with very very detailed Chinese API. Like my rookie, look at the API, probably know how to do it.

Ztree is divided into three chunks: setting configuration, Ztree method, TreeNode node data. See the name of righteousness, not much to say. The main part of the talk is about his core.

Core: Ztree (setting, [Ztreenodes])
This function takes a JSON-formatted data object setting and a JSON-formatted data object Ztreenodes to build the Tree.

Core parameter: Setting
Ztree parameter configuration is done here, simply say: Tree style, events, access path, etc. are configured here
setting Example:

Because there are too many parameters, see Ztreeapi for specific parameters.

Core parameter: Ztreenodes

Ztree is a collection of all node data, using a data structure composed of JSON objects, which simply says: This uses the JSON format to save all of the tree's information.
The format of the ztreenodes is divided into two types: nested in JSON format to reflect parent-child relationships and array simple formatting

① Standard Ztreenodes examples with parent-child relationships:

② Ztreenodes Example of a simple Array format (Issimpledata) with a parent-child relationship:

var treenodes = [                                                                       

Light say not practice mouth bashi, come to see a simple small demo:

① in the page reference Ztree JS and CSS:

<!--ztree Tree plug-in--><link rel= "stylesheet" href= "<%=root%>/web/common/css/ztreestyle/ztreestyle.css" Type= "Text/css" ><!--<link rel= "stylesheet" href= "<%=root%>/web/common/css/ztreestyle/ Ztreeicons.css "type=" Text/css ">  --><script type=" Text/javascript "src=" <%=root%>/web/common/ Js/jquery-ztree-2.5.min.js "></script>

② defining setting and Ztreenodes in the script script

var setting = {issimpledata:true,              //data is in simple Array format, default falsetreenodekey: "id",               //in issimpledata format, Current Node id attribute treenodeparentkey: "PId",        //In issimpledata format, the parent Node ID property of the current node showline:true,                  //whether the connection between nodes is displayed checkable: True                  

③ The tree structure when entering the page:

$ (function () {Ztree = $ ("#tree"). Ztree (setting, TreeNodes);});

④ Last View effect:

Total

As long as the core of the ztree is clear, so easy. The thread will go deeper, get the simple format JSON data from the background, asynchronously load ...

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Ztree First Experience (i)--small trial sledgehammer