Jquery.simpleTree.js usage Analysis of jquery tree plug-in _jquery

This example describes the Jquery.simpleTree.js usage of the jquery tree plug-in. Share to everyone for your reference, specific as follows:

Recently wrote the Project CMS system, customer requirements background management can be through a tree to show the entire help document structure, and through the drag and drop operation to achieve the position of the article and column changes, I find a half-day on the Internet, decided to use jQuery.simpleTree.js to achieve.

This tree control supports dragging a node to a new location, providing a aftermove function override, and we can save the drag by invoking Ajax in the Aftermove function after the drag completes to change the database in the background.

At the same time, the node of the tree also has a click event, and each node, like a button, is a lot more scalable than a hyperlink.

All it takes to build this tree is to generate some HTML elements such as the following code

<li id= ' ><span class= ' text ' >tree Node Ajax 1</span></li> <li ' id= ' ><span class= ' Text ">tree node ajax 2</span></li> <li id= ' Notoginseng ' ><span class=" text ">tree Node Ajax 3</span&
  Gt <ul> <li id= ' ><span class= ' text ' >tree Node Ajax 3-1</span> <ul> <li Id= ' ><span class= "text" >tree Node Ajax 3-1-1</span></li> <li ' id= ' ><span class= "Text" >tree node ajax 3-1-2</span></li> <li id= ' ><span class= ' text ' >tree node Ajax 3 -1-3</span></li> <li id= ' ><span class= ' text ' >tree Node Ajax 3-1-4&LT;/SPAN&GT;&LT;/LI&G
      T
    </ul> </li> <li id= ' ><span class= ' text ' >tree Node Ajax 3-2</span></li> <li id= ' ><span class= "text" >tree Node Ajax 3-3</span> <ul> <li id= ' ' ' >< Span Class= "Tex"T ">tree node ajax 3-3-1</span></li> <li id= ' ><span class= ' text ' >tree Node Ajax 3-3-2
      </span></li> <li id= ' ><span class= ' text ' >tree Node Ajax 3-3-3</span></li> 
    </ul> </li> <li id= ' ><span class= ' text ' >tree Node Ajax 3-4</span></li> <li id= ' ><span class= "text" >tree Node Ajax 3-5</span> <ul> <li id= ' ; <span class= "text" >tree Node Ajax 3-5-1</span></li> <li id= ' Wuyi ' ><span class= ' text ' > Tree Node Ajax 3-5-2</span></li> <li id= ' ><span class= ' text ' >tree Node Ajax 3-5-3</s pan></li> </ul> </li> <li id= ' ><span class= ' text ' >tree Node Ajax 3-6< /span></li> </ul> </li> <li id= ' si ' ><span class= "text" >tree Node Ajax 4</span>&

 Lt;/li>

The resulting tree is as follows:

Of course this is the static code implementation, in the jquery.simpletree generated these HTML elements is the loadtree.php file, we can completely remove data from the database in the form of these HTML elements printed out.

More interested readers of jquery-related content can view the site topics: "jquery Extended Tips," "jquery common Plug-ins and Usage summary", "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", " A summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with the jquery program design.