jQuery Horizontal Tree is a jQuery plugin for visualizing data in tree structures. This plugin supports add, update, delete functionality with ajax and also supports drag and drop for branch reorganization.
A plugin that allows you to render structures with nested elements in tree structures. All you have to do is make a single line call to the plugin and set the parameters to create the tree and supply the HTML Element Id for the nested random list component that represents the data you want to display.
PHP Demo contains every features.
In the PHP demo you can add, update, and delete data from the tree. Just move the mouse over the tree and you can see the add, update and delete icons.
Also, this demo is just to understand how it works dynamically. You need to update the PHP code as per your requirement and maybe you will need to update the jQuery code somewhere.
Local setup: First you need to upload source code to your server (xampp or wamp) and import tree.sql database then update db.php according to your configration and then test it in http://localhost/jquery-horizontal-tree/php/
PHP demo is for admin user who has full rights and can add, update, and delete.
In the HTML demo you can’t add, update, delete, and drag and drop because it is for viewers and they can only see the tree structure of the organization.
Feel free to contact me at aeonian.in@gmail.com anytime if you are stuck somewhere.
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.
default value is true.
We can add a new branch to the tree by clicking on add icon.
default value is true.
We can update particular branch by clicking on edit icon.
default value is true.
We can delete particular branch with all child branches by clicking on delete icon.
default value is true.
If by mistake click on delete icon then ask for confirmation before delete branch.
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. After setting it to true you can see the horizontal scroll.
default value is 'center'.
We can set align of tree structure with this option. options are left, right and center.
default value is true.
We can perform a drag-and-drop with tree branchs. We drag the tree branch which we want to move and then drop the dragged branch on the destination branch. The dragged branch will now bound to the destination branch.
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 branch of that branch and click on edit icon then check the checkbox (hide child branchs) and save it.