SEO-friendly Tree View Plugin For Bootstrap 4 - bstree

bstree is a simple-to-use jQuery/Bootstrap 4 plugin used to present hierarchical data in a semantic, collapsible tree view with checkboxes.

Features:

• SEO friendly. The plugin renders a tree view from nested HTML lists.
• Supports Three State Checkbox: checked, unchecked, or indeterminate.
• Font Awesome icons.
• Lots of configuration options.

How to use it:

1. Load the needed jQuery library, Bootstrap 4 framework, and Font Awesome iconic font in the html document.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

2. Download and import the jQuery bstree plugin's files.

<link rel="stylesheet" href="bstree.css">
<script src="jquery.bstree.js"></script>

3. Insert your hierarchical data in nested HTML lists as follows:

• data-id: node ID
• date-level: node level

<div id="mytree" class="bstree">
  <ul>
    <li data-id="root" data-level="0"><span>Racine</span>
      <ul>
        <li data-id="ACL" data-level="1"><span>Alsace - Champagne-Ardenne - Lorraine</span>
          <ul>
            <li data-id="ALS" data-level="2"><span>Alsace</span>
              <ul>
                <li data-id="ALS01" data-level="3"><span>Colmar</span></li>
                <li data-id="ALS02" data-level="3"><span>Mulhouse</span></li>
                <li data-id="ALS03" data-level="3"><span>Darmstadt</span></li>
              </ul>
            </li>
            <li data-id="CHA" data-level="2"><span>Champagne-Ardenne</span>
              <ul>
                <li data-id="CHA01" data-level="3"><span>Bazeilles</span></li>
                <li data-id="CHA02" data-level="3"><span>Châlons-en-Champagne</span></li>
                <li data-id="CHA03" data-level="3"><span>Charleville-Mézières</span></li>
              </ul>
            </li>
            <li data-id="LOR" data-level="2"><span>Lorraine</span>
              <ul>
                <li data-id="LOR01" data-level="3"><span>Cosnes-et-Romain</span></li>
                <li data-id="LOR02" data-level="3"><span>Épinal</span></li>
                <li data-id="LOR03" data-level="3"><span>Forbach</span></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

4. Call the function to render a basic tree view on the page.

$('document').ready(function () {
  $('#mytree').bstree()
})

5. Add checkboxes to the nodes.

<input id="bstree-data" type="hidden" name="bstree-data" data-ancestors="ALS:IDF">
<div id="mytree" class="bstree">
  ...
</div>

$('document').ready(function () {
  $hiddenInput = $('#bstree-data')
  $('#mytree').bstree({
    dataSource: $hiddenInput,
    initValues: $hiddenInput.data('ancestors'),
    onDataPush: function (values) {
      var def = '<strong class="pull-left">Values:&nbsp;</strong>'
      for (var i in values) {
        def += '<span class="pull-left">' + values[i] + '&nbsp;</span>'
      }
      $('#status').html(def)
    },
    updateNodeTitle: function (node, title) {
      return '[' + node.attr('data-id') + '] ' + title + ' (' + node.attr('data-level') + ')'
    }
  })
})

6. All default configuration options to customize the tree view.

$('#mytree').bstree({
  DEBUG: false,
  dataSource: '',                                      // the source control id
  initValues: '',
  dataSeparator: ':',                                     // the separator used for the exploded data
  chevronOpened: '<i class="fa fa-toggle-down fa-lg"></i>',    // the icon used for an opened node
  chevronClosed: '<i class="fa fa-toggle-right fa-lg"></i>',   // the icon used for a closed node
  isExpanded: false,                                 // sets if nodes are initially expanded
  nodeClass: pluginName + '-node',                      //  generic node class
  compositeClass: pluginName + '-composite',                 //  composite node class
  leafClass: pluginName + '-leaf',                      //  leaf node class
  childrenClass: pluginName + '-children',                  //  node children class
  innerContainerClass: pluginName + '-inner-container',
  chevronClass: pluginName + '-chevron',                   //  chevron icon class
  labelClass: pluginName + '-label',                     //  label class
  labelContainerClass: pluginName + '-label-container',
  iconClass: pluginName + '-icon',                      //  label icon class
  expandedClass: pluginName + '-expanded',                  //  opened node class
  closedClass: pluginName + '-closed',                    //  closed node class
  checkboxClass: pluginName + '-checkbox',                  //  checkbox class
  incompleteClass: pluginName + '-incomplete',                //  incomplete node class
  vLineClass: pluginName + '-vline',
  dataClass: pluginName + '-data',
  openTitle: 'Open',
  closeTitle: 'Close',
  checkboxTitle: 'Do action',
  updateNodeTitle: null,
  onDataPush: null
})

---

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