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), radio buttons and for populating the tree using a JSON data source.

Installation

bower install jquery-bonsai --save

Examples

Create a Collapsible Tree from a Nested List

$('#music').bonsai();
  1. Instrumental Ensembles
    • String section
    • Brass and/or Horns sections
    • Percussion Sections
  2. Individual Instruments
    • Bass Guitar
    • Contrabass
    • Drums
    • Cymbals
    • Guitar - Either
    • Guitar (Acoustic)
    • Guitar (Electric)
    • Keyboarded
      • Accordion
      • Harpsichord
      • Organ
      • Piano
      • Synth
        • Imitative Synthesis
    • Non-Pitched Percussion
      • Hand Percussion
    • Horns
      • Trombone
      • Trumpet
    • Idiophone
    • String
    • Woodwind
      • Sax
        • Soprano
        • Alto
        • Tenor
        • Baritone
    • Other
  3. Lyrical content
  4. Vocals
    • Male
    • Female
  5. Elements
  6. Other

A Tree with Checkbox Semantics

Checkboxes are handled using the jQuery Qubit library.

From Checkboxes in Markup

$('#checkboxes').bonsai({
  expandAll: true,
  checkboxes: true, // depends on jquery.qubit plugin
  handleDuplicateCheckboxes: true // optional
});
  1. All
    1. One
    2. Two
      1. Three
        1. Four
        2. Five
    3. Duplicate of five

Auto-Generated Checkboxes

Creates checkboxes for each list item. The name and value for the checkboxes are taken from data-name and data-value. The name is inherited from the parent items, if not specified. Checked state can be indicated using data-checked.

$('#auto-checkboxes').bonsai({
  expandAll: true,
  checkboxes: true, // depends on jquery.qubit plugin
  createInputs: 'checkbox' // takes values from data-name and data-value, and data-name is inherited
});

The following markup...

<ol id='auto-checkboxes' data-name='foo'>
  <li class='expanded' data-value='0'>All
    <ol>
      <li data-value='1'>One</li>
      <li data-value='2' data-id='2'>
        Two
        <ol>
          <li data-name='baz' data-value='3'>
            Three
            <ol>
              <li data-name='baz' data-value='4' data-checked='1'>Four</li>
            </ol>
          </li>
          <li data-value='5'>Five</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
      

...yields:

  1. All
    1. One
    2. Two
      1. Three
        1. Four
      2. Five

Auto-Generated Radio Buttons

Creates radio buttons for each list item. The name and value for the checkboxes are taken from data-name and data-value. The name is inherited from the parent items, if not specified. Checked state can be indicated using data-checked.

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

The following markup...

<ol id='auto-radio-buttons' data-name='foo'>
  <li class='expanded' data-value='0'>All
    <ol>
      <li data-value='1'>One</li>
      <li data-value='2' data-id='2'>
        Two
        <ol>
          <li data-value='3'>
            Three
            <ol>
              <li data-value='4' data-checked='1'>Four</li>
            </ol>
          </li>
          <li data-value='5'>Five</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
      

...yields:

  1. All
    1. One
    2. Two
      1. Three
        1. Four
      2. Five

Generate the Tree Using a JSON Data Source

Requires the JSON List plugin.

$('#from-JSON').jsonList({
  url: 'example.json',
  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
    });
  }
});

API

See the README on Github

If the DOM changes then you'll need to call update:

$('#from-JSON > ol').bonsai('update');