Dynamic Tree View Plugin With jQuery And Bootstrap

A jQuery treeview plugin that helps you render a dynamic, checkable, filterable, collapsible, vertical hierarchical tree from a JSON schema. Licensed under the Apache License, Version 2.0.

The jQuery plugin is rewritten in TypeScript and supports the latest Bootstrap 5 framework. Download Here.

 

See Also:

• 10 Best Tree View Plugins In JavaScript And Pure CSS

How to use it:

1. Make sure you first have jQuery library and Twitter Bootstrap's stylesheet are loaded in the document.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>

2. Load the jQuery Bootstrap tree view plugin's files in the document.

<link rel="stylesheet" href="bootstrap-treeview.css">
<script src="bootstrap-treeview.js"></script>

3. Create a placeholder element for the tree view.

<div id="default-tree"></div>

4. The required JSON structure to hold your hierarchical data.

var myTree = [
    {
      text: "Item 1",
      nodes: [
        {
          text: "Item 1-1",
          nodes: [
            {
              text: "Item 1-1-1"
            },
            {
              text: "Item 1-1-2"
            }
          ]
        },
        {
          text: "Item 1-2"
        }
      ]
    },
    {
      text: "Item 2"
    },
    {
      text: "Item 3"
    }
    ...
];

5. Render a default tree view inside the DIV container you just created.

$('#default-tree').treeview({
  data: myTree
});

6. All customization options for the tree view.

$('#default-tree').treeview({

  // expanded to 2 levels
  levels: 2,

  // custom icons
  expandIcon: 'glyphicon glyphicon-plus',
  collapseIcon: 'glyphicon glyphicon-minus',
  emptyIcon: 'glyphicon',
  nodeIcon: '',
  selectedIcon: '',
  checkedIcon: 'glyphicon glyphicon-check',
  uncheckedIcon: 'glyphicon glyphicon-unchecked',

  // colors
  color: undefined, // '#000000',
  backColor: undefined, // '#FFFFFF',
  borderColor: undefined, // '#dddddd',
  onhoverColor: '#F5F5F5',
  selectedColor: '#FFFFFF',
  selectedBackColor: '#428bca',
  searchResultColor: '#D9534F',
  searchResultBackColor: undefined, //'#FFFFFF',

  // enables links
  enableLinks: false,

  // highlights selected items
  highlightSelected: true,

  // highlights search results
  highlightSearchResults: true,

  // shows borders
  showBorder: true,

  // shows icons
  showIcon: true,

  // shows checkboxes
  showCheckbox: false,

  // shows tags
  showTags: false,

  // enables multi select
  multiSelect: false

});

7. Event handlers available.

$('#default-tree').treeview({

  onNodeChecked: undefined,
  onNodeCollapsed: undefined,
  onNodeDisabled: undefined,
  onNodeEnabled: undefined,
  onNodeExpanded: undefined,
  onNodeSelected: undefined,
  onNodeUnchecked: undefined,
  onNodeUnselected: undefined,
  onSearchComplete: undefined,
  onSearchCleared: undefined

});

8. All available methods.

// check all nodes
$('#default-tree').treeview('checkAll', { silent: true });

// checks a given node
$('#default-tree').treeview('checkNode', [ nodeId, { silent: true } ]);

// clears search results
$('#default-tree').treeview('clearSearch');

// collapses all nodes
$('#default-tree').treeview('collapseAll', { silent: true });

// collapses a given node
$('#default-tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);

// expands all nodes
$('#default-tree').treeview('expandAll', { silent: true });

// expands a given node
$('#default-tree').treeview('expandNode', [ nodeId, { silent: true, ignoreChildren: false } ]);

// disables all nodes
$('#default-tree').treeview('disableAll', { silent: true });

// disables a given node
$('#default-tree').treeview('disableNode', [ nodeId, { silent: true } ]);

// enables all nodes
$('#default-tree').treeview('enableAll', { silent: true });

// enables a given node
$('#default-tree').treeview('enableNode', [ nodeId, { silent: true } ]);

// returns an array of collapsed nodes
$('#default-tree').treeview('getCollapsed', nodeId);

// returns an array of disabled nodes
$('#default-tree').treeview('getDisabled', nodeId);

// returns an array of enabled nodes
$('#default-tree').treeview('getEnabled', nodeId);

// returns an array of expanded nodes
$('#default-tree').treeview('getExpanded', nodeId);

// returns a single node object that matches the given node id
$('#default-tree').treeview('getNode', nodeId);

// returns the parent node of a given node, if valid otherwise returns undefined
$('#default-tree').treeview('getParent', node);

// returns an array of selected nodes
$('#default-tree').treeview('getSelected', nodeId);

// returns an array of sibling nodes for a given node, if valid otherwise returns undefined.
$('#default-tree').treeview('getSiblings', node);

// returns an array of unselected nodes
$('#default-tree').treeview('getUnselected', nodeId);

// removes the tree view component
$('#default-tree').treeview('remove');

// reveals a given tree node, expanding the tree from node to root.
$('#default-tree').treeview('revealNode', [ nodeId, { silent: true } ]);

// searches the tree view for nodes that match a given string, highlighting them in the tree
$('#default-tree').treeview('search', [ 'Parent', {
  ignoreCase: true,     // case insensitive
  exactMatch: false,    // like or equals
  revealResults: true,  // reveal matching nodes
}]);

// selects a given tree node, accepts node or nodeId.
$('#default-tree').treeview('selectNode', [ nodeId, { silent: true } ]);

// toggles a nodes checked state; checking if unchecked, unchecking if checked.
$('#default-tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);

// toggles a nodes disabled state; disabling if enabled, enabling if disabled.
$('#default-tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);

// toggles a nodes expanded state; collapsing if expanded, expanding if collapsed.
$('#default-tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);

// toggles a node selected state; selecting if unselected, unselecting if selected.
$('#default-tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);

// uncheck all tree nodes
$('#default-tree').treeview('uncheckAll', { silent: true });

// uncheck a given tree node, accepts node or nodeId
$('#default-tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);

// unselects a given tree node, accepts node or nodeId.
$('#default-tree').treeview('unselectNode', [ nodeId, { silent: true } ]);

9. Events.

$('#default-tree').on('nodeChecked', function(event, data) {
  // Checked
});

$('#default-tree').on('nodeCollapsed', function(event, data) {
  // Collapsed
});

$('#default-tree').on('nodeDisabled', function(event, data) {
  // Disabled
});

$('#default-tree').on('nodeEnabled', function(event, data) {
  // Enabled
});

$('#default-tree').on('nodeExpanded', function(event, data) {
  // Expanded
});

$('#default-tree').on('nodeSelected', function(event, data) {
  // Selected
});

$('#default-tree').on('nodeUnchecked', function(event, data) {
  // Unchecked
});

$('#default-tree').on('nodeUnselected', function(event, data) {
  // Unselected
});

$('#default-tree').on('searchComplete', function(event, data) {
  // searchComplete
});

$('#default-tree').on('searchCleared', function(event, data) {
  // searchCleared
});

---

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