Step 1

Include CSS & SCRIPT into HEAD section of the page.
<link href="style.css" rel="stylesheet" type="text/css"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/jquery.tree.js"></script> <script> $(document).ready(function() { $('.tree').tree_structure({ 'add_option': true, 'edit_option': true, 'delete_option': true, 'confirm_before_delete': true, 'animate_option': false, 'fullwidth_option': false, 'align_option': 'center', 'draggable_option': true }); }); </script>

Step 2

Include HTML code into BODY section of the page.

<div class="overflow"> <div> <ul class="tree"> <li> <div>1</div> <ul> <li> <div>1.1</div> <ul> <li> <div>1.1.1</div> </li> <li> <div>1.1.2</div> </li> <li> <div>1.1.3</div> <ul> <li> <div>1.1.3.1</div> <ul> <li> <div>1.1.3.1.1</div> </li> <li> <div>1.1.3.1.2</div> </li> </ul> </li> <li> <div>1.1.3.1</div> </li> </ul> </li> </ul> </li> <li> <div>1.2</div> <ul> <li> <div>1.2.1</div> </li> <li> <div>1.2.2</div> </li> </ul> </li> <li> <div>1.3</div> <ul> <li> <div>1.3.1</div> </li> <li> <div>1.3.2</div> </li> <li> <div>1.3.3</div> </li> </ul> </li> <li> <div>1.4</div> <ul> <li> <div>1.4.1</div> </li> <li> <div>1.4.2</div> </li> <li> <div>1.4.3</div> </li> </ul> </li> <li> <div>1.5</div> <ul> <li> <div>1.5.1</div> </li> <li> <div>1.5.2</div> </li> <li> <div>1.5.3</div> </li> </ul> </li> </ul> </li> </ul> </div> </div>

$(document).ready(function() { $('.tree').tree_structure({ 'add_option': true, 'edit_option': true, 'delete_option': true, 'confirm_before_delete': true, 'animate_option': false, 'fullwidth_option': false, 'align_option': 'center', 'draggable_option': true }); });

These are default parameter. Each parameter has a default value as part of its definition. If no argument is sent for that parameter, the default value is used. you can override value of parameters as per your requirements.

I have mentioned below the description of each parameter.

• add_option

  default value is true.

  We can add new node to the tree by clicking on add icon. Any name can be used to specify the node. Not only name we can use textarea for content or html code.

• edit_option

  default value is true.

  We can edit particular node by clicking on edit icon.

• delete_option

  default value is true.

  We can delete particular node with all child nodes by clicking on delete icon.

• confirm_before_delete

  default value is true.

  If by mistake click on delete icon then we have confirm message box before delete node.

• animate_option

  default value is [true, 5].

  Draw lines between nodes with animation on page load, we can increase or decrease animation speed.

• fullwidth_option

  default value is false.

  If value is false then tree structure is set as per browser width, change this value with true then tree structure get full width if tree width is bigger then browser width then tree structure set with horizontal scroll.

• align_option

  default value is 'center'.

  We can set align of tree structure with this option. options are left, right and center.

• draggable_option

  default value is true.

  We can perform a drag-and-drop operation with tree nodes. We drag the tree node which we want to move and then drop the dragged node on the destination node. The dragged node will now bound to the destination node.

---

• We can Show or hide a particular branch of the tree by clicking on the show hide icon. If you want to hide particular branch of tree then go on parent node of that branch and click on edit icon then check the checkbox[hide child nodes] and save it.
• We can single/double click the highlight icon which performs the below mentioned operations
  - Single Click : It highlights all its parent nodes and child nodes.
  - Double Click : It navigate and shows only all its parent nodes and child nodes and clicking on Back Icon we can view whole tree.

Click here for download demo with PHP, Mysql and Ajax

Step 1 :

Put downloaded folder in your system local php server[maybe it is htdocs]. Now create blank database in phpmyadmin & import tree.sql[tree.sql is located in demo_php_ajax folder]
Note : Blank database name must be tree.

Step 2 :

Open db.php and edit mysql connection with your database username and password.

Now ran index.php

jQuery and Google and iconfinder.com