“jQuery Horizontal Tree” Documentation

jQuery Horizontal Tree



Contact me

Thank you for purchasing jQuery Horizontal Tree. If you have any questions that are beyond the scope of this help file, please feel free to Contact me. Thank you so much!

Special note for buyers (who have already purchased this plugin.) I made some major changes recently, so if you want to update your plugin with these changes, please back up your code and database (tree table) first.

Table of Contents

  1. About jQuery Horizontal Tree
  2. List of features
  3. Customization
  4. Demonstration
  5. Local Setup
  6. Sources and Credits

1) About jQuery Horizontal Tree - top

jQuery Horizontal Tree is used to visualize data in tree structures. This is a small and easy jQuery plugin that helps render a horizontal treeview-like diagram from the hierarchical data.
For example, if you want to create a family hierarchy tree where your grandfather stands at the 1st level, your father stands at the 2nd at the second level, you stand at the 3rd level, and your child stands at the 4th level.
OR
If you want to create an organization tree for office use that has a CEO, Managers, and Employees.
This is the best plugin for you.
This plugin supports add, update, and delete functionality with Ajax and also supports drag-and-drop for branch reorganization.
All you have to do is make a single-line call to the plugin 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.
This plugin also supports the drag-and-drop. Suppose you are creating an organization tree, it's very easy for you to move any employee from one place to another (by using the drag-and-drop functionality).
Don't forget to check the round icon on the left side of the branch, mouseover on it and see the magic.

2) List of features - top

  1. Allows you to render tree structures with nested elements
  2. Add, update, and delete branches from the UI
  3. Drag-and-drop for re-organisation of elements
  4. Show/hide a particular branch of the tree by clicking on the show hide icon
  5. Highlight a particular branch of the tree by clicking on the highlight icon
  6. Easy to style
  7. Full support and documentation

3) Customization - top

Each option (parameter) has a default value as part of its definition.
You can override the default value of the option (parameter) as per your requirement.
If no argument is passing for that parameter, the plugin selects the default value.

Here are the details of each option.

admin_access This option allows you to add, update, and delete any branch through UI.
You can see the plus and pencil icons once you mouseover to any node. Click there and the popup will open where you can add and update the data.
Please check the Admin demo where you can add, update, and delete data from the tree.
default value is false.

Demo: http://nioc.co.in/jquery-horizontal-tree/admin.php

confirm_before_delete This is an additional check that warns you before deleting any node.
Suppose by mistake you click on the delete icon then there will be a popup that asks for confirmation before deleting the branch. You can test the Admin demo.
This option is only useful if admin_access is true.
default value is true.

Demo: http://nioc.co.in/jquery-horizontal-tree/admin.php

align_option You can change the alignment of the tree structure with this option.
Options are left, right, and center.
default value is "center".

Center Alignment



Left Alignment



Right Alignment

custom_width By default, the plugin auto-calculates the width of the tree structure.
Suppose the default width creates an issue with your web page's default CSS. Using this option you can set whatever width you want for the tree structure.
You need to enter only one value here.
Example: custom_width: 1000
default value is false.

4) Demonstration - top

This package contains 2 demos.

Admin demo

In the Admin demo, you can add, update, and delete data from the tree. You can see the add, update, and delete icons. You can say that the Admin demo contains every feature.
You can drag-and-drop for reorganization tree. Drag the tree branches that you want to move and then drop the dragged branch on the destination branch. The dragged branch will now be bound to the destination branch.
You can show OR hide a particular branch of the tree by clicking on the show hide icon.
Also, this demo is just to understand how it works dynamically. You need to update the code as per your requirement and maybe you will need to update the jQuery code somewhere.
Admin demo link: https://nioc.co.in/jquery-horizontal-tree/admin.php

Viewers demo

In the Viewers demo, you can not add, update, delete, and drag and drop because it is only for viewers and they can only see the tree structure of the organization.
Viewers demo link: https://nioc.co.in/jquery-horizontal-tree/viewers.php

5) Local Setup (follow the below steps) - top

  1. Install xampp OR wamp to your local system
  2. First, you need to upload source code to your server (xampp or wamp) (jquery-horizontal-tree directory to htdocs)
  3. Then import tree.sql database (you can see the tree table in your database)
  4. Update db.php according to your configuration
  5. Test it in the browser http://localhost/jquery-horizontal-tree/admin.php

Admin demo is for an admin user who has full rights and can add, update, and delete.

6) Sources and Credits - top

Feel free to Contact me anytime if you are stuck somewhere.

Once again, thank you so much for purchasing jSon Slider. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. I'll do my best to assist.

Go To Table of Contents