Semantic Tree View Plugin With jQuery - Simple Tree

A simple, SEO-friendly jQuery tree plugin which converts nested HTML lists into a collapsible and expandable tree structure. Ideal for representing your folders, files, menu items as a hierarchical tree.

More features:

• Custom collapse all & expand all buttons.
• Auto saves the current state using localStorage or sessionStorge.

How to use it:

1. Install & download.

# NPM
$ npm install @kanety/jquery-simple-tree --save

2. Link to jQuery library and the jQuery simple tree plugin's files.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="dist/jquery-simple-tree.js"></script>

3. Add node ID to list items using the data-node-id attribute:

<ul id="basic">
  <li data-node-id="1">
    <span>1</span>
    <ul>
      <li data-node-id="1.1">
        <span>1.1</span>
        <ul>
          <li data-node-id="1.1.1">
            <span>1.1.1</span>
          </li>
          <li data-node-id="1.1.2">
            <span>1.1.2</span>
          </li>
        </ul>
      </li>
      <li data-node-id="1.2">
        <span>1.2</span>
        <ul>
          <li data-node-id="1.2.1">
            <span>1.2.1</span>
          </li>
          <li data-node-id="1.2.2">
            <span>1.2.2</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li data-node-id="2">
    <span>2</span>
    <ul>
      <li data-node-id="2.1">
        <span>2.1</span>
      </li>
      <li data-node-id="2.2">
        <span>2.2</span>
      </li>
    </ul>
  </li>
</ul>

4. Call the plugin to initialize the tree.

$('#basic').simpleTree();

5. Expand/collapse all nodes using toggle buttons:

<button type="button" id="expander">expand</button>
<button type="button" id="collapser">collapse</button>

$('#basic').simpleTree({
  expander: $('#expander'),
  collapser: $('#collapser')
});

6. Determine whether to save the current open/close states using localStorage or sessionStorge.

$('#basic').simpleTree({
  storeState: true,
  storeType: 'session' // or 'local'
});

7. Specify the nodes to open on init. Default: all.

$('#basic').simpleTree({
  opened: [1, 1.1]
});

8. Get the opened/closed nodes.

$('#basic').simpleTree().on('node:open', function(e, $node) {
  var nodeID = $node.data('node-id');
  $('#message').append("opened " + nodeID + " ");
  if ($node.data('node-lazy')) {
    $node.data('node-lazy', false);
    var newID = nodeID + '.1';
    var loaded = '<ul><li data-node-id="' + newID + '" data-node-lazy="true"><span>' + newID + '</span></li></ul>';
    $node.append(loaded);
    $('#callback').data('simple-tree').build();
  }
}).on('node:close', function(e, $node) {
  var nodeID = $node.data('node-id');
  $('#message').append("closed " + nodeID + " ");
});

Changelog:

v0.5.0 (2020-09-22)

• Add flag to keep node opened

v0.4.0 (2019-11-08)

• Support focus movement by keyboard.
• Change default icon template from span tag to a tag.

v0.3.0 (2019-10-21)

• Fix css class name.
• Bundle css with js.

v0.2.1 (2019-10-05)

• Fix jquery deprecated selector

v0.2.0 (2019-07-17)

• Separate store class and change store options.
• Destroy existing instance on initialization.
• Change event hanlder class.
• Tweak css.

v0.1.1 (2019-05-22)

• Treat li without data-node-id as node.
• Tweak css style.

 

---

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