Visualize JSON Data Into Folder/Organization Trees - jQuery vTree

vTree is a flexible complex data visualization jQuery plugin designed to visualize JSON data into expandable and collapsible tree structures, such as folder directories, family trees, or organization hierarchies.

How to use it:

1. Download and include the vTree plugin's files on the page.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Vtree Plugin -->
<link rel="stylesheet" href="/path/to/jquery.vTree.css" />
<script src="/path/to/jquery.vTree.js"></script>

2. Create an empty container to hold the tree view.

<div id="example"></div>

3. Call the plugin on the container and specify the path to the JSON file.

$('#example').vTree({
  url: 'data.json'
});

// data.json
{
  "leaves": [
    {"leaf_id": 1, "name": "node 1", "no_leaves": 0},
    {"leaf_id": 2, "name": "node 2", "no_leaves": 0},
    {"leaf_id": 3, "name": "node 2", "no_leaves": 1},
    {"leaf_id": 4, "name": "node 3", "no_leaves": 1},
    {"leaf_id": 5, "name": "node 4", "no_leaves": 1}
  ]
}

4. Specify an element to expand & collapse nodes.

$('#example').vTree({
  url: 'data.json',
  clickSelector: 'a',
  onLeafShow: function (el, data) { 
    el.append('<a href="javascript:;">'+data.leaf_id+'</a> '+data.name); 
  }
});

5. Render your JSON data as a folder tree.

$('#example').vTree({
  url: 'data.json',
  config: 'v-catalog',
  clickSelector: 'a',
  onLeafShow: function (el, data) { 
    el.append('<a href="javascript:;">'+data.name+'</a>'); 
  }
});

6. Render your JSON data as a family/organization chart.

$('#tree').vTree({
  url: 'data.json',
  config: 'v-tree',
  setLeaf: function () { 
    return $('<div style="border: 1px solid black; background: #eee; padding: 5px;"><a class="leaf-body" href="javascript:;"></a><div>');
  }
});

---

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