Jquery+ztree loading a tree-shaped structure menu

Jquery+ztree loading a tree-shaped structure menu

Because the project needs to design the function of the tree menu, after some churn, finally to get out, so it is written down, is also a summary of learning ztree it.

Introduction of Ztree:

1, Ztree is the use of JQuery's core code, to achieve a set of most common functions of the Tree plugin

2, Ztree v3.0 the core code according to the function of the division, the unwanted code can not load

3, the use of delayed loading technology, tens of thousands of nodes easily loaded, even under the IE6 can basically do the second kill

4, compatible with IE, FireFox, Chrome, Opera, Safari and other browsers

5. Support JSON Data

6. Support Static and Ajax loading node data asynchronously

7. Support any skin replacement/custom icon (depending on CSS)

8. Support for extremely flexible checkbox or radio selection function

9. Provide multiple event response callbacks

10, flexible editing (Add/delete/change/check) function, you can drag and drop the node, can also be multi-node drag yo

11. Multiple Tree instances can be generated at the same time within a page

The core functions and properties are described:

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

      };

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 saves all of the tree's information in JSON format.

1, ztree official website: http://www.ztree.me/v3/main.php#_zTreeInfo

In the official website can download to the Ztree source code, the instance and the API, in which the author PDF API writes very detailed

The method of obtaining the node data of Ztree is divided into static (directly defined) and dynamic (background database loading).

Specific configuration steps:

The first step--the introduction of relevant documents

<LinkRel="Stylesheet"href="Ztree/css/ztreestyle/ztreestyle.css"Type="Text/css" ><Scripttype= "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:

1, the first (ZTREESTYLE.CSS) is a ztree style CSS file, introduced this, in order to show the structure of the tree style,

2, the second (jquery-1.9.1.min.js) is a jquery file, because to use,

3, the third (jquery.ztree.core-3.5.min.js) is the core of Ztree JS file, this is necessary,

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

The second step-related configuration (detailed configuration, please refer to the website of the detailed API documentation)

var Ztree;var setting = {View: {  Dblclickexpand:FalseWhether to automatically expand the identity of the parent node when you click the node ShowLine:TrueWhether to show connections between nodes fontcss:{' Color ':' Black ',' Font-weight ':' Bold '},Font style functions Selectedmulti:FalseSet whether multiple nodes are allowed to be selected at the same time},check:{  Chkboxtype: {"Y": "PS", "N": "PS"}, Chkstyle:"checkbox",check box type EnableTrueWhether a CheckBox is displayed on each node},Data: { Simpledata: {Simple Data Mode  EnableTrue  IdKey:"id",  PIdKey:"PId",  Rootpid:"" }},Callback: { Beforeclick:function (Treeid, TreeNode) {  Ztree = $.fn.ztree.getztreeobj ( "User_tree");    if (treenode.isparent) { Span class= "indent" >    Ztree.expandnode (TreeNode); span class= "comment" >//if it is a parent node, expand the node   }else{    Ztree.checknode (TreeNode,!treenode. Checked, true, true);   } }}};             

The third step--node data loading, showing the tree structure

1, HTML page, directly put a UL can, the data will eventually automatically loaded into this UL element inside

<body> <div class= " Ztreedemobackground left ">  < ul id=  < Span style= "color: #ff0000;" > "User_tree"  class= "Ztree" style=< Span class= "value" > "border:1px solid #617775; overflow-y: scroll;height:500px;" ></ul> </ div></BODY>        

2, JS in the loading of data

One, static mode (directly defined)

var znodes =[{ID:1, PId:0, Name:"Test 1", open:False},{ID:One, PId:1, Name:"Test 1-1", open:True},{ID:111, PId:One, Name:"Test 1-1-1"},{ID:The pId:One, Name:"Test 1-1-2"},{ID:PId:1, Name:"Test 1-2", open:True},]; $ (document). Ready (function () { $.fn.ztree.init ($ (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); //get the value of the selected node }}          

Two, dynamic mode (load from the background database)

/** * Page Initialization */$ (document). Ready (function () {Onloadztree ();});/** * Load tree structure data */function onloadztree () {var treenodes;$.ajax ({ AsyncFalseis asynchronous CacheFalseWhether to use the cache Type' POST ',Request Method: Post DataType:' json ',//Data transfer format: JSON url:$ (' #ctx '). Val () +"Sendnoticemsgservlet?action=loadusertree",The requested action path Error:function () {   //request failed handling function    Alert ( Pro, request failed!) ‘);  },  Success:function (data) { span class= "comment" >//console.log (data);    //request succeeded after processing function    TreeNodes = data;  //the simple JSON format encapsulated in the background is assigned to Treenodes } });   var t = $ ( T = $. Fn.zTree.init (t, setting, TreeNodes);}            

Java Background Load data code :

1, define the Vo class tree, this also can not be defined, because I want to use other operations, convenient some

/** * Ztree Tree Structure Object VO class * *@author Administrator * * * *PublicClassTreevo { Private String ID;Node ID Private String pId;Parent node PID I must be uppercase private String name;Node name Private String open ="False";Whether to expand the tree node, not expanded by default Public String getId () {  return ID;} Publicvoid SetId (String id) {  This.id = ID;} Public String Getpid () {  return pId;} Publicvoid Setpid (String pId) {  This.pid = pId;} public String getName () { Span class= "indent" > return name;}  public void setName (String name) {   this.name = name;}  public String getopen () {  span class= "keyword" >return open; } public void setopen ( String Open) {  this.open = open;}}  

2, query the database, and the structure of SQL field is also Id,pid,name,open (optional) This format (note: The middle of the pId I must capitalize), and then encapsulate the results into the Treevo class.

/*** Load tree structure data*@param request*@param response*@throws IOException*/ Publicvoid 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 return      PrintWriter out = Response.getwriter ();  Span class= "indent" > //use the JSON plugin to convert the array to JSON format      //release resources   Out.close (); }       

Here completes the entire operation, eh Sass, the writing is not good, the organization language nature is not how, everybody forgive! Learn together and grow together!

Jquery+ztree loading a tree-shaped structure menu