JSON Based Hierarchical Tree Plugin - Simple TreePicker

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.