Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aexmachina/jquery-bonsai
https://github.com/aexmachina/jquery-bonsai
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/aexmachina/jquery-bonsai
- Owner: aexmachina
- License: mit
- Created: 2020-04-18T19:58:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-08T00:50:09.000Z (over 3 years ago)
- Last Synced: 2024-10-30T04:17:45.929Z (17 days ago)
- Language: JavaScript
- Size: 709 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-jquery - jquery-bonsai - Super lightweight jQuery tree plugin (Folder Structure / Data Table)
README
# jQuery Bonsai
`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.
## Installation
bower
```
bower install jquery-bonsai --save
```npm
```
npm install jquery-bonsai --save
```## Usage
```
$('ul#my-nested-list').bonsai();
```## API
### `$.fn.bonsai(options)`
```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
});
```### `Bonsai#update()`
If the DOM changes then you'll need to call `#update`:
```js
$('#list').bonsai('update');
```### `Bonsai#listItem(id)`
Return a jQuery object containing the `
### Expanding/collapsing a single items
- `Bonsai#expand(listItem)`
- `Bonsai#collapse(listItem)`
- `Bonsai#toggle(listItem)`
- `Bonsai#expandTo(listItem)`
```js
var bonsai = $('#list').data('bonsai');
bonsai.expand(listItem);
```
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.
```js
var bonsai = $('#list').data('bonsai');
var state = bonsai.serialize();
```
### `Bonsai#restore()`
Restores the expanded/collapsed state of the list using the return value of `#serialize()`.
```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
```