🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

tree-view

Documentation

jquery-simple-tree

A jquery plugin for simple tree ui.

Dependencies

  • jquery

Installation

Install from npm:

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

Usage

Build tree using list elements as follows:

<ul id="tree">   <li data-node-id="1">     <span>text of 1</span>     <ul>       <li data-node-id="1.1">         <span>text of 1.1</span>         <ul>           <li data-node-id="1.1.1">             <span>text of 1.1.1</span>           </li>           <li data-node-id="1.1.2">             <span>text of 1.1.2</span>           </li>         </ul>       </li>     </ul>   </li> </ul>

Then run:

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

Options

Specify opened nodes:

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

Save node state to sessionStorage or localStorage:

$('#tree').simpleTree({   store: 'session', // or 'local'   storeKey: 'YOUR_KEY' });

Callbacks

Run callbacks when a node is opened or closed:

$('#tree').simpleTree({   ... }).on('node:open', function(e, $node) {   ... }).on('node:close', function(e, $node) {   ... });

Functions

Manipulate nodes from your script:

var tree = $('#tree').data('simple-tree');  // get SimpleTree instance tree.openByID(1); tree.closeByID(1);

License

The library is available as open source under the terms of the MIT License.


You May Also Like