The use of the document tree for JQuery TreeView

The most recent project is to use the TreeView plugin, just to sort out the information yourself.

One of the simplest examples is the implementation of the document tree. The effect is as shown.

　　

Before you can use the TreeView, you need to include several jquery.js, Jquery.treeview.js, and jquery.treeview.css files in your HTML document. Please download the details from the official website. Remember that the Jquery.js reference must precede the jquery.treeview.js.

The specific code is as follows:

1 <H1>File Tree Example</H1>2   <ulID= "File"class= "Filetree">3     <Li><spanclass= "folder">Information</span>4         <ul>5             <Li><spanclass= "File">Disc</span></Li>6         </ul>7     </Li>8     <Li><spanclass= "folder">Books</span>9         <ul>Ten             <Li><spanclass= "folder">Novel</span> One                 <ulID= "book"> A                     <Li><spanclass= "File">Contemporary Fiction</span></Li> -                     <Li><spanclass= "File">Classical fiction</span></Li> -                 </ul> the             </Li> -             <Li><spanclass= "File">Poetry</span></Li> -         </ul> -     </Li> +     <Liclass= "Closed"><spanclass= "folder">Game</span> -         <ul> +             <Li><spanclass= "File">Casual games</span></Li> A         </ul> at     </Li> -     <Li><spanclass= "folder">Photo</span></Li> -   </ul>

As seen from the code, to show the effect of the document tree, you must add the Filetree class in the first UL class. The display of folders and files is achieved by adding a <span></span>. Folders use the folder class, and files use the file class. The implementation of the document tree is also implemented through nested lists. Adding the closed class to the containing related folder Li allows the folder to remain closed, by default all document trees are open.

Simple above code is not able to achieve the effect of the document tree, to achieve the effect, you also need to add JS code. Attention to the first UL in the Id=file attribute, this time will come in handy, JS code is as follows:

1  $ (document). Ready (function() {2       $ ("#file"). TreeView (); 3 4   });

This is the implementation of a simple document tree.

The use of the document tree for JQuery TreeView