A lightweight jQuery plugin that takes a big nested list and prunes it down to a small expandable tree control.
npm install 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.
bower install jquery-bonsai --save
npm
npm install jquery-bonsai --save
Usage
$('ul#my-nested-list').bonsai();
API
$3
js
$('#list').bonsai({
expandAll: false, // expand all items
expand: null, // optional function to expand an item
collapse: null, // optional function to collapse an item
addExpandAll: false, // add a link to expand all items
addSelectAll: false, // add a link to select all checkboxes
selectAllExclude: null, // a filter selector or function for selectAll
idAttribute: 'id', // which attribute of the list items to use as an id // createInputs: create checkboxes or radio buttons for each list item
// using a value of "checkbox" or "radio".
//
// The id, name and value for the inputs can be declared in the
// markup using
data-id, data-name and data-value.
//
// The name is inherited from parent items if not specified.
//
// Checked state can be indicated using data-checked.
createInputs: false,
// checkboxes: run qubit(this.options) on the root node (requires jquery.qubit)
checkboxes: false,
// handleDuplicateCheckboxes: update any other checkboxes that
// have the same value
handleDuplicateCheckboxes: false
});
`$3
If the DOM changes then you'll need to call
:`js
$('#list').bonsai('update');
`$3
Return a jQuery object containing the
with the specified id.$3
-
Bonsai#expand(listItem)
-
-
- js
var bonsai = $('#list').data('bonsai');
bonsai.expand(listItem);
`All of these methods accept either a DOMElement, a jQuery object or an
and return a
jQuery object containing the list item.$3
-
Bonsai#expandAll(listItem)
- $3
Returns an object representing the expanded/collapsed state of the list, using the items' id
to identify the list items.
js
var bonsai = $('#list').data('bonsai');
var state = bonsai.serialize();
`$3
Restores the expanded/collapsed state of the list using the return value of
.`js
var bonsai = $('#list').data('bonsai');
var state = bonsai.serialize();
// do stuff that changes the DOM, and may not retain collapsed state
bonsai.update(); // update to handle any new DOM elements
bonsai.restore(state); // restores the collapsed state
``