A simple introduction to using the Treeview.js plugin to generate a tree-like menu (with code that generates a menu from a JSON string)

In the process of doing Web project work, the use of Treeview.js plug-ins, plug-ins are their own new contacts, now the project is completed, here to summarize the use of plug-ins.

Treeview.js is a plug-in that generates a tree-like menu based on a fixed element nesting format, and does not limit the number of nested layers, and the resulting tree menu can have a lower-level menu, and other plugins found on the web will typically have nested layer limits.

The nested format is as follows:

1<ul id= "tree" class= "Filetree" >2<li><span class= "folder" > Folders 1</span>3<ul>4<li><span class= "folder" > Subfolders 1</span></li>5<li><span class= "folder" > Subfolders 2</span>6<ul>7<li><span class= "folder" > Subfolders 3</span></li>8<li><span class= "File" > Files 1</span></li>9</ul>Ten</li> One</ul> A</li> -</ul>

The outer UL class is "Filetree", is the plug-in in the prescribed wording, so that the contents of the UL into the tree-like menu elements into the original UL. The initial element of the UL is written as shown in the above code, each level of the menu by Li

Contains a SPAN element, which can be divided into two types:

One is Floder, indicating that this level is a folder, you can add UL under it, within the UL element to write the contents of this level folder, each menu under the UL element can have multiple;

The other is file, which indicates that the level is files, and the sub-structure can no longer be expanded below.

After the two transformations are functionally different, the folder class can be clicked to open the merge, file does not have this function.

When all the structures are written, you can call the following code to convert them to a tree menu:

1 $ ("#tree"). TreeView ();

The above code shows the result is as follows, the code shows the results are not beautiful, it is recommended to write a CSS to beautify, to ensure that the site style consistent.

Treeview.js also supports the option of adding cookies to maintain the expansion of each level of the menu, but I do not have a lot of research on cookies, only the application in Treeview.js, first create a cookie, and then use the cookie method by adding parameters to the TreeView function.

$.cookie (' usertreestate '); $ ("#user_tree"). TreeView ({   "usertreestate",   Cookieoptions: {      '/'   }});

There are many parameters that can be added in the TreeView function, which are explained in detail in many of Daniel's blogs and are not introduced here.

Because Treeview.js is a tree-like structure generated from a well-written structure, it is possible to create a tree-like menu based on some of the contents of the basic structure, and then call the function to generate the TreeView (data is a JSON string) based on the JSON string in my project:

1 varD = eval ("(" + Data + ")");2 varRoot = Document.createelement ("ul");3$ (Root). attr ("id", "user_root");4 varcontainer =NewObject ();//The container where nodes are placed to facilitate the finding of the nodes to be manipulated5 varPathes = d["Pathes"];6 $.each (pathes,function(i, record) {8             varPath = record["Path"];9             varnodes = Path.split (' > '));Ten             varLast_node = (nodes[nodes.length-1].split (' * ')) [0]; One             varPdf_or_url = (nodes[nodes.length-1].split (' * ')) [1]; ANODES[NODES.LENGTH-1] =Last_node; -             varPre_node_name = ""; -             varCur_node_name = ""; the              for(varj = 0; J < Nodes.length; J + +) { -               if(j = = 0) { -Cur_node_name =Nodes[j]; -}Else { +Cur_node_name = Pre_node_name + ">" +Nodes[j]; -               } +               if(Container[cur_node_name + "folders"] = = undefined && J = = 0{//handles the first node, and the first node is not in the container, creating the node into the container A                 varLi = document.createelement ("li"); at                 varspan = document.createelement ("span"); -                 varText =document.createTextNode (Nodes[j]); -Container[cur_node_name + "Folders"] =Document. createelement ("ul"); -Container[cur_node_name + "files"] =document.CreateElement ("ul"); in$ (container[cur_node_name + "Folders"]). attr ("id"),Cur_node_name + "Folders"); to$ (container[cur_node_name + "files"]). attr ("id",Cur_node_name + "Files"); - span.appendchild (text); the$ (span). attr ("Class", "folder"); *$ (span). attr ("id", "usertree_folder"); $ Li.appendchild (span);Panax Notoginseng$ (LI). attr ("Class", "Closed"); -Li.appendchild (container[cur_node_name + "Folders"]); theLi.appendchild (Container[cur_node_name + "files"]); + $ (root). Prepend (LI); APre_node_name =Cur_node_name; the}Else if(Container[cur_node_name + "folders"] = =undefined) {//node does not exist, create a new node into the container with two UL under each node . +                 varLi = document.createelement ("li"); -                 varspan = document.createelement ("span"); $                 varText =document.createTextNode (Nodes[j]); $Container[cur_node_name + "Folders"] =Document. createelement ("ul"); -Container[cur_node_name + "files"] =Document. createelement ("ul"); -$ (container[cur_node_name + "Folders"]). attr ("id"),Cur_node_name + "Folders"); the$ (container[cur_node_name + "files"]). attr ("id",Cur_node_name + "Files"); Wu span.appendchild (text); -$ (span). attr ("Class", "folder"); About$ (span). attr ("id", "usertree_folder"); $ Li.appendchild (span); -$ (LI). attr ("Class", "Closed"); -Li.appendchild (container[cur_node_name + "Folders"]); -Li.appendchild (Container[cur_node_name + "files"]); A$ (container[pre_node_name + "Folders"]). prepend (LI); +Pre_node_name =Cur_node_name; the}Else { -Pre_node_name =cur_node_name;//Replace the operating node. $               } the             } the             if(Pdf_or_url! =undefined) { the               varLi = document.createelement ("li"); the               varspan = document.createelement ("span"); -               varText =document.createTextNode (pdf_or_url); in span.appendchild (text); the$ (span). attr ("Class", "file"); the$ (span). attr ("id", "usertree_file"); About Li.appendchild (span); theContainer[pre_node_name + "Files"].appendchild (LI); the             } the       })
 -$ (Root). AppendTo ("#user_tree");//Add the generated element to the corresponding UL in the JSP, call the function to generate the menu
Bayi$.cookie (' Usertreestate '); the$ ("#user_tree"). TreeView ({ thePersist: "Cookie", -Cookieid: "Usertreestate", - cookieoptions: { thePath: '/' the         }, theCollapsed: "True", the Add:root -});

The JSON string format used is as follows, ">" is used to represent the folder hierarchy, and "*" is used to represent the file.

{"Pathes": [{"Path": "Opop>oldl>lll"},{"path": "A>b>c>d*1111.pdf"},{"path": "a>b>c>d*2222. PDF "},{" path ":" A>y>c>d*1111.pdf "},{" path ":" A>y>c>d*2222.pdf "},{" path ":" A>b>c>e* Eeee.pdf "}, {" Path ":" A>b>c*cccc.pdf "}, {" Path ":" A>b*bbbb.pdf "},{" path ":" J "},{" path ":" J>b*bbbb.pdf "}] }

A simple introduction to using the Treeview.js plugin to generate a tree-like menu (with code that generates a menu from a JSON string)