Introduction to ztree

[introduction]

Ztree uses the core code of jQuery to implement a set of tree plug-ins that can complete most common functions

Ztree is a multifunctional "tree plug-in" implemented by jQuery. Excellent performance, flexible configuration and combination of multiple functions are the greatest advantages of ztree.

Official documents: http://www.treejs.cn/v3/main.php#_zTreeInfo

 compatible with ie, Firefox, chrome and other browsers

 multiple tree instances can be generated simultaneously in one page

 support JSON data

 support one-time static generation and Ajax asynchronous loading

 support multiple event responses and feedback

 support tree node movement, editing and deletion

 support any change of skin / personalized icons (relying on CSS)

 support extremely flexible check@R_320_2419 @Or radio selection function

 simple parameter configuration to realize flexible functions

[introduction to some functions and attributes]

 core: ztree (setting, [ztreenodes])

This function accepts a JSON format data object setting and a JSON format data object ztreenodes to create a tree.

 core parameter: setting

The parameter configuration of ztree is completed here. In short, the tree style, events, access paths, etc. are configured here

Setting example:

JS code

Because there are too many parameters, see ztreeapi for specific parameters

 core parameter: ztreenodes

All node data sets of ztree adopt the data structure composed of JSON objects. In short, all information of the tree is saved in JSON format

Ztreenodes can be divided into two formats: using JSON format nesting to reflect parent-child relationship and array simple format

① Examples of standard ztreenodes with parent-child relationships:

JS code

② Example of ztreenodes in simple array format (issimpledata) with parent-child relationship:

JS code

[example 1] (Java code)

① Reference the JS and CSS of ztree on the page:

HTML code

② Define setting and ztreenodes in the script

Java code

③ Generate a tree structure when entering the page:

JS code

JS code

④ Last view:

[example 2] (get JSON data in simple format from the background)

① Background code encapsulates simple format JSON data:

Java code

② The page uses Ajax to obtain ztreenodes data and regenerate it into a tree

JS code

③ Final display effect

[example 3] dynamically obtain data from the background, and the tree node provides the right-click menu function

① Configure setting:

JS code

② Configure the right-click event and display the code of the right-click menu

JS code

JS code

③ The tree is generated when the page is loaded, and the mouse click event is monitored to hide the right-click menu in time

JS code

④ The background code obtains the tree node information according to the ID

-----------------------Action layer-----------------------

Java code

-----------------------Service layer-----------------------

Java code

⑤ Last view: