Horizontal Hierarchical Tree View Plugin For jQuery - hortree
File Size: | 32.8 KB |
---|---|
Views Total: | 17624 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

hortree is a small and easy jQuery plugin that helps render a horizontal treeview-like diagram from the hierarchical data you specify in a JSON file.
See Also:
- 10 Best Tree View Plugins In JavaScript And Pure CSS
- 7 Best Organizational Chart Generators In JavaScript Or Pure CSS
How to use it:
1. Create a container element to place the horizontal hierarchical tree.
<div id="my-container"></div>
2. Include jQuery library and the JavaScript file jquery.hortree.min.js
at the bottom of the web page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.hortree.min.js"></script>
3. Include the jQuery Line plugin if you'd like to draw a line between parent and child nodes.
<script src="jquery.line.js"></script>
4. Define your hierarchical data in a JSON file.
[ { "description": "Element ROOT", "children": [ { "description": "Element 1", "children": [ { "description": "Element 1.1", "children": [] }, { "description": "Element 1.2", "children": [ { "description": "Element 1.2.1", "children": [] } ] } ] }, { "description": "Element 2", "children": [ { "description": "Element 2.1", "children": [] }, { "description": "Element 2.2", "children": [] } ] }, { "description": "Element 3", "children": [ { "description": "Element 3.1", "children": [] }, { "description": "Element 3.2", "children": [] }, { "description": "Element 3.3", "children": [ { "description": "Element 3.3.1", "children": [] }, { "description": "Element 3.3.2", "children": [] } ] } ] } ] } ]
5. The JavaScript to render a default hierarchical tree inside the container you just created.
$.getJSON('data.json', function (jsonData) { $('#my-container').hortree({ data: jsonData }); });
6. Apply you own CSS styles to the hierarchical tree.
.hortree-wrapper *, .hortree-wrapper *:before, .hortree-wrapper *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .hortree-wrapper { position: relative; font-family: sans-serif, Verdana, Arial; font-size: 0.9em; } .hortree-branch { position: relative; margin-left: 180px; } .hortree-branch:first-child { margin-left: 0; } .hortree-entry { position: relative; margin-bottom: 50px; } .hortree-label { display: block; width: 150px; padding: 2px 5px; line-height: 30px; text-align: center; border: 2px solid #4b86b7; border-radius: 3px; position: absolute; left: 0; z-index: 10; background: #fff; }
7. Or directly include the jquery.hortree.css
in the head
section of the webpage.
<link rel="stylesheet" href="jquery.hortree.css">
8. Default plugin options.
$('#my-container').hortree({ lineStrokeWidth: 2, lineZindex: 8, lineColor: '#4b86b7', data: [], onComplete: function () { // onComplete callback } });
Changelog:
2022-01-04
- v1.0.2
2017-05-02
- Updated getPos function.
2017-03-23
- Added tooltip management
2017-03-18
- Deleted an empty test function
This awesome jQuery plugin is developed by alesmit. For more Advanced Usages, please check the demo page or visit the official website.