Horizontal Hierarchical Tree View Plugin For jQuery - hortree

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.