Flexible Dynamic Tree Generator With jQuery - Bonsai.js

Yet another jQuery tree view plugin that lets you create a flexible, dynamic, expandable and collapsible tree control from nested html lists or hierarchical JSON data.

More features:

• Auto generates checkboxes and radio buttons.
• Indeterminate checkbox is supported as well.
• Useful options and API methods.

How to use it:

1. Include the jQuery Bonsai.js plugin's files on the html page.

<link href="jquery.bonsai.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.bonsai.js"></script>

2. Create a basic tree from a nested html list.

<ul id="tea" class="demo1">
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

$('#tea').bonsai();

3. Make the tree items selectable with checkboxes. This requires the jQuery qubit plugin to handle checkbox states.

<ol id="auto-checkboxes" data-name="foo">
  <li class="expanded" data-value="0">All
    <ol>
      <li data-value="1">Coffee</li>
      <li data-value="2" data-id="2">
        Tea
        <ol>
          <li data-name="blacktea" data-value="3">Black tea</li>
          <li data-value="4">Green tea</li>
        </ol>
      </li>
      <li data-value="5">Milk</li>
    </ol>
  </li>
</ol>

$('#auto-checkboxes').bonsai({
  expandAll: true,
  checkboxes: true,
  createInputs: 'checkbox'
});

4. Make the tree items selectable with radio buttons.

<ol id="auto-checkboxes" data-name="foo">
  <li class="expanded" data-value="0">All
    <ol>
      <li data-value="1">Coffee</li>
      <li data-value="2" data-id="2">
        Tea
        <ol>
          <li data-name="blacktea" data-value="3">Black tea</li>
          <li data-value="4">Green tea</li>
        </ol>
      </li>
      <li data-value="5">Milk</li>
    </ol>
  </li>
</ol>

$('#auto-radio-buttons').bonsai({
  expandAll: true,
  createInputs: 'radio'
});

5. Create a tree from JavaScript strings. This requires the jquery-json-list plugin to create a nested list from a JSON document.

<div id="from-JSON"></div>

$('#from-JSON').jsonList({
  url: 'json.js',
  type: 'groupedItems',
  groups: 'locationGroups',
  items: 'locations',
  // onListItem: called for each list item created from the JSON
  onListItem: function(event, listItem, data, isGroup) {
    if (!isGroup) {
      // set the id into a data value so that Bonsai createInputs
      // can set the checkbox value
      listItem.attr('data-value', data.id);
    }
  },
  // success: called after the list is created
  onSuccess: function(event, jsonList) {
    // turn the list into a tree
    $(this.el).find('> ol').bonsai({
      checkboxes: true,
      createInputs: 'checkbox',
      handleDuplicateCheckboxes: true,
      expandAll: true
    });
  }
});

// example.js
{
  "locationGroups": [
    {
      "id": 1,
      "name": "AU - NSW",
      "editable": false,
      "children": [1, 2],
      "subGroups": []
    },
    {
      "id": 2,
      "type": "group",
      "name": "AU - QLD",
      "editable": false,
      "children": []
    },
    {
      "id": 3,
      "type": "group",
      "name": "AU - SA",
      "editable": false,
      "children": [3]
    },
    {
      "id": 4,
      "type": "group",
      "name": "Metropolitan",
      "editable": true,
      "children": [2]
    }
  ],
  "locations": [
    {
      "id": 1,
      "name": "Neutral Bay"
    },
    {
      "id": 2,
      "name": "North Sydney",
      "selected": true
    },
    {
      "id": 3,
      "name": "Valley View"
    }
  ]
}

6. Full plugin options and event handlers.

// expand all items
expandAll: false, 

// optional function to expand an item
expand: null, 

// optional function to collapse an item
collapse: null, 

// add a link to expand all items
addExpandAll: false, 

// add a link to select all checkboxes
addSelectAll: false, 

// a filter selector or function for selectAll
selectAllExclude: null, 

// which attribute of the list items to use as an id
idAttribute: 'id', 

// createInputs: create checkboxes or radio buttons for each list item
// by setting createInputs to "checkbox" or "radio".
//
// The name and value for the inputs can be declared in the
// markup using `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,

// createRadioButtons: creates radio buttons for each list item.
//
// The name and value for the checkboxes can be declared in the
// markup using `data-name` and `data-value`.
//
// The name is inherited from parent items if not specified.
//
// Checked state can be indicated using `data-checked`.
createRadioButtons: false

7. API methods.

ar bonsai = $('#el').data('bonsai');

// updates the tree
bonsai.update();

// returns a jQuery object containing the <li> with the specified id.
bonsai.listItem(id);

// expands an item
bonsai.expand(listItem);

// collapses an item
bonsai.collapse(listItem);

// toggles an item
bonsai.toggle(listItem);

// expands to an item
bonsai.expandTo(listItem);

// expands all the items
bonsai.expandAll(listItem);

// collapses all the items
bonsai.collapseAll(listItem);

// returns an object representing the expanded/collapsed state of the list, using the items' id to identify the list items.
bonsai.serialize();

// collapses all the items
var state = bonsai.serialize();
bonsai.restore(state);

---

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