Visualize JSON Data Into Folder/Organization Trees - jQuery vTree
File Size: | 12.4 KB |
---|---|
Views Total: | 662 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.