Dynamic Family Tree/Organization Chart Plugin - jHTree

The jHTree plugin helps you dynamically renders an animated, draggable, zoomable, expandable, collapsible and themeable Family Tree/Organization Chart️ from hierarchical data defined in the JSON.

Requires jQuery and jQuery UI.

How to use it:

1. Include the jQuery jHTree plugin's files after you've included jQuery & jQuery UI libraries.

<link href="/path/to/jquery-ui.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src=""/path/to/jquery-ui.custom.min.js"></script>
<link href=""/path/to/HTree.css" rel="stylesheet">
<script src=""/path/to/jQuery.jHTree.js"></script>

2. Create an empty container in which you want to render the tree.

<div id="tree">
</div>

3. Prepare your data in a JSON file.

// data.json
[{
  "head": "A",
  "id": "aa",
  "contents": "A Contents",
  "children": [
    {
      "head": "A-1",
      "id": "a1",
      "contents": "A-1 Contents",
      "children": [
        { "head": "A-1-1", "id": "a11", "contents": "A-1-1 Contents" }
      ]
    },
    {
      "head": "A-2",
      "id": "a2",
      "contents": "A-2 Contents",
      "children": [
        { "head": "A-2-1", "id": "a21", "contents": "A-2-1 Contents" },
        { "head": "A-2-2", "id": "a22", "contents": "A-2-2 Contents" }
      ]
    }
  ]
}]

4. Fetch the data from the JSON file via AJAX and render a tree inside the container element you just created.

$("#tree").jHTree({
  callType: 'url',
  url: 'myData.json',
  nodeDropComplete: function (event, data) {
    //----- Do Something @ Server side or client side -----------
    //alert("Node ID: " + data.nodeId + " Parent Node ID: " + data.parentNodeId);
    //-----------------------------------------------------------
  }
});

5. You're also allowed to define the tree data in the JS objects as these.

var myData = [{
  "head": "A",
  "id": "aa",
  "contents": "A Contents",
  "children": [
    {
      "head": "A-1",
      "id": "a1",
      "contents": "A-1 Contents",
      "children": [
        { "head": "A-1-1", "id": "a11", "contents": "A-1-1 Contents" }
      ]
    },
    {
      "head": "A-2",
      "id": "a2",
      "contents": "A-2 Contents",
      "children": [
        { "head": "A-2-1", "id": "a21", "contents": "A-2-1 Contents" },
        { "head": "A-2-2", "id": "a22", "contents": "A-2-2 Contents" }
      ]
    }
  ]
}]

$("#tree").jHTree({
  callType: 'obj',
  structureObj: myData,
  nodeDropComplete: function (event, data) {
    //----- Do Something @ Server side or client side -----------
    //alert("Node ID: " + data.nodeId + " Parent Node ID: " + data.parentNodeId);
    //-----------------------------------------------------------
  }
});

6. Enable/disable the zoomer.

$("#tree").jHTree({
  callType: 'obj',
  structureObj: myData,
  zoomer: true
});

---

This awesome jQuery plugin is developed by naadydev. For more Advanced Usages, please check the demo page or visit the official website.