JSON Based Hierarchical Tree Plugin - Simple TreePicker
File Size: | 9.96 KB |
---|---|
Views Total: | 2411 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Simple TreePicker is a jQuery plugin for displaying JSON data as a collapsible, expandable, selectable, and hierarchical tree structure.
You can select nodes or a subset of the tree by checking/un-checking checkboxes.
How to use it:
1. Insert the Simple TreePicker plugin's files into the document which has the latest jQuery library loaded.
<link rel="stylesheet" href="jquery.simple-tree-picker.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.simple-tree-picker.js"></script>
2. Create an empty DIV element to hold the tree.
<div class="tree"></div>
3. Initialize the plugin and populate the tree with the JSON data you provide.
var demoData = JSON.parse('/* JSON DATA HERE */');
$('.tree').simpleTreePicker( { "tree": demoData, "name" : "Tree Name Here" });
4. Get the current selected node(s).
var demoData = JSON.parse('/* JSON DATA HERE */');
$('.tree').simpleTreePicker( { "tree": demoData, "onclick": function(){ var selected = $(".tree").simpleTreePicker("display"); // ... }, });
5. Set preselected nodes.
$('.tree').simpleTreePicker( { "tree": demoData, "selected" : [ "node-1","node-2" ], });
This awesome jQuery plugin is developed by meub. For more Advanced Usages, please check the demo page or visit the official website.