Display Hierarchical Data As A Searchable Tree - simpleTree

A simple yet full-featured tree view jQuery plugin which makes it possible to display your hierarchical data as a searchable, expandable and collapsible tree.

More features:

• Child node count
• Custom CSS styles for selected nodes.
• Useful options and API methods.
• Custom expand/collapse symbols.

See also:

• 10 Best Tree View Plugins For jQuery

How to use it:

1. Load the jQuery simpleTree plugin's JavaScript and CSS files after loading jQuery JavaScript library (slim build is recommended).

<link href="simpleTree.css" rel="stylesheet">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="simpleTree.js"></script>

2. Create a placeholder element for the tree.

<div id="mytree"></div>

3. Prepare your hierarchical data to be presented as a tree.

let data = [{
    label: 'HTML',
    value: 'html',
    expanded: true // optional
    children: [{
      label: 'HTML5',
      value: 'html5'
    }, {
        label: 'XML',
        value: 'xml'
    }]}, {
    label: 'JavaScript',
    value: 'javaScript',
    children: [{
      label: 'React',
      value: 'react',
      children: [{
        label: 'React Native',
        value: 'reactnative'
      }]}, {
        label: 'Angular',
        value: 'angular'
    }]
}];

4. Render the data as a tree.

$('#mytree').simpleTree(options, data);

5. To enable the live filter functionality, create a search field and provide the jQuery element in the JavaScript as follows. simpleTree then takes control over the provided box, handling user input.

<input type="search" id="example">

var options = {
    searchBox: $('#example'),
    searchMinInputLength: 2
};

$('#mytree').simpleTree(options, data);

6. All default configuration options.

var options = {
    // Optionally provide here the jQuery element that you use as the 
    // search box for filtering the tree. simplTree then takes control
    // over the provided box, handling user input
    searchBox: undefined,

    // Search starts after at least 3 characters are entered in the
    // search box
    searchMinInputLength: 3,

    // Number of pixels to indent each additional nesting level
    indentSize: 25,

    // Show child count badges?
    childCountShow: true,

    // Symbols for expanded and collapsed nodes that have child nodes
    symbols: {
      collapsed: '▶',
      expanded: '▼'
    },

    // these are the CSS class names used on various occasions. 
    // If you change these names, you also need to provide
    // the corresponding CSS class. See simpleTree.css
    css: {
      childrenContainer: 'simpleTree-childrenContainer',
      childCountBadge: 'simpleTree-childCountBadge badge badge-pill badge-secondary',
      highlight: 'simpleTree-highlight',
      indent: 'simpleTree-indent',
      label: 'simpleTree-label',
      mainContainer: 'simpleTree-mainContainer',
      nodeContainer: 'simpleTree-nodeContainer',
      selected: 'simpleTree-selected',
      toggle: 'simpleTree-toggle'
    }
};

7. API methods.

$('#mytree').simpleTree(options, data);

8. Execute a function when a node is selected/deselected.

$('#mytree').simpleTree(options, data)
.on('simpleTree:change', function(selectedNode){
  // do something
})

---

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