jQuery Bonsai
Visit project page and demos
jquery-bonsai
is a lightweight jQuery plugin that takes a big nested list and prunes it down to a small expandable
tree control.
Also includes support for checkboxes (including 'indeterminate' state) and for populating the tree using a JSON data source.
See http://simonwade.me/jquery-bonsai/ for more information.
Installation
bower
bower install jquery-bonsai --save
npm
npm install jquery-bonsai --save
Usage
$('ul#my-nested-list').bonsai();
API
$.fn.bonsai(options)
;
Bonsai#update()
If the DOM changes then you'll need to call #update
:
;
Bonsai#listItem(id)
Return a jQuery object containing the <li>
with the specified id
.
Expanding/collapsing a single items
Bonsai#expand(listItem)
Bonsai#collapse(listItem)
Bonsai#toggle(listItem)
Bonsai#expandTo(listItem)
var bonsai = data'bonsai';bonsai;
All of these methods accept either a DOMElement, a jQuery object or an id
and return a
jQuery object containing the list item.
Expanding/collapsing the whole tree
Bonsai#expandAll(listItem)
Bonsai#collapseAll(listItem)
Bonsai#serialize()
Returns an object representing the expanded/collapsed state of the list, using the items' id to identify the list items.
var bonsai = data'bonsai';var state = bonsai;
Bonsai#restore()
Restores the expanded/collapsed state of the list using the return value of #serialize()
.
var bonsai = data'bonsai';var state = bonsai;// do stuff that changes the DOM, and may not retain collapsed statebonsai; // update to handle any new DOM elementsbonsai; // restores the collapsed state