Collapsible Tree View With Checkboxes - jQuery hummingbird-treeview

Collapsible Tree View With Checkboxes - jQuery hummingbird-treeview
File Size: 32.7 KB
Views Total: 49471
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

hummingbird-treeview is a jQuery plugin that transforms nested html lists into an expandable, collapsible, searchable, checkable, hierarchical tree structure with lots of useful options and APIs.

Also includes support for 'indeterminate' state in the checkbox inputs.

See also:

How to use it:

1. Create an HTML tree of nested unordered lists as follows. The data-str attribute is used to add more custom functionality to the nodes.

<ul id="treeview">
  <li> <i class="fa fa-plus"></i>
      <input id="xnode-0" data-id="custom-0" type="checkbox" />
      node-0 </label>
      <li> <i class="fa fa-plus"></i>
          <input  id="xnode-0-1" data-id="custom-0-1" type="checkbox" />
          node-0-1 </label>
              <input class="hummingbirdNoParent" id="xnode-0-1-1" data-id="custom-0-1-1" type="checkbox" />
              node-0-1-1 </label>
              <input class="hummingbirdNoParent" id="xnode-0-1-2" data-id="custom-0-1-2"  data-str='data-toggle="tooltip" data-placement="auto" title="1987"' type="checkbox" />
              node-0-1-2 </label>
      <li> <i class="fa fa-plus"></i>
          <input  id="xnode-0-2" data-id="custom-0-2" type="checkbox" />
          node-0-2 </label>
              <input class="hummingbirdNoParent" id="xnode-0-2-1" data-id="custom-0-2-1" type="checkbox" />
              node-0-2-1 </label>
              <input class="hummingbirdNoParent" id="xnode-0-2-2" data-id="custom-0-2-2" type="checkbox" />
              node-0-2-2 </label>

2. Download and load the jQuery hummingbird-treeview plugin's files along with the jQuery library into the document.

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

3. Load the Font Awesome for the necessary icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

4. Just initialize the plugn and done.


5. Override the global settings.

// Font Awesome prefix
$.fn.hummingbird.defaults.symbolPrefix = "fa"

// Collapsed Symbol
$.fn.hummingbird.defaults.collapsedSymbol = "fa-plus";

// Expand Symbol
$.fn.hummingbird.defaults.expandedSymbol = "fa-minus";

// Collapse all nodes on init
$.fn.hummingbird.defaults.collapseAll = true; 

// Enable checkboxes
$.fn.hummingbird.defaults.checkboxes = "enabled"; 

// Set this to "disabled" to disable all checkboxes from nodes that are parents
$.fn.hummingbird.defaults.checkboxesGroups= "enabled"; 

// Enable end-nodes
$.fn.hummingbird.defaults.checkboxesEndNodes = "enabled"; 

// Set this to true to enable the functionality to account for n-tuples (doubles, triplets, ...). 
$.fn.hummingbird.defaults.checkDoubles = false;

// New option singleGroupOpen to allow only one group to be open and collapse all others.
// The number provided defines the level to which the function should be applied (starting at 0). 
$.fn.hummingbird.defaults.singleGroupOpen = -1;

// Enable a mouse hover effect on items
$.fn.hummingbird.defaults.hoverItems = false; 

// Or "bootstrap" to use Bootstrap's styles
$.fn.hummingbird.defaults.hoverMode = "html"; 

// Background color on hover
$.fn.hummingbird.defaults.hoverColorBg1 = "#6c757c"; 

// Background color on non hover
$.fn.hummingbird.defaults.hoverColorBg2 = "white"; 

// Text color on hover
$.fn.hummingbird.defaults.hoverColorText1 = "white"; 

// Text color on non hover
$.fn.hummingbird.defaults.hoverColorText2 = "black"; 

// Use Bootstrap colors
$.fn.hummingbird.defaults.hoverColorBootstrap = "bg-secondary text-white"; 

// Set this to "enabled" to add collapse and expand functionality to a click on a parent node name.
$.fn.hummingbird.defaults.clickGroupsToggle = "disabled"; 

6. API methods.

// check all nodes

// uncheck all nodes

// collapse all nodes

// expand all nodes

// check a specific node
  name: "xnode-0-2-2",

// uncheck a specific node
  name: "xnode-0-2-2",

// expand a specific node
  name: "xnode-0-2-2",

// collapse a specific node
  name: "xnode-0-2-2",

// Disables expand and collapse functionality of a node, which is identified by its id or data-id, which has to be defined in the attr parameter. The name parameter holds the name of the id or data-id.
$("#treeview").hummingbird("disableToggle",{attr:"id",name: "node-0-1-1-2"});

// disable a specific node
  name: "xnode-0-2-2",

// enable a specific node
  name: "xnode-0-2-2",
  state: false

// hide a node
$("#treeview").hummingbird("hideNode",{attr:"id",name: "node-0-1-1-2"});

// show a node
$("#treeview").hummingbird("showNode",{attr:"id",name: "node-0-1-1-2"});

// remove a node

// get checked nodes
var List = [];
  list: list,

// get unchecked nodes
var List = [];
  list: list,

// Skip firing the CheckUncheckDone event in the following call. 
// This method can be called before any other method to skip firing the CheckUncheckDone event in the followed method.

// filter

// If the treeview is embedded in a scrollable (css option: overflow-y: scroll;) container, this container must be identified here as the treeview_container (using the id). Otherwise treeview_container should be set to "body". 
// The search_input parameter depicts the id of the input element for the search function. 
// The search_output defines an element to bind the search results on (like the ul in the example below). 
// The search_button is simply the button for the search. 
// A scrollOffset in pixels (negative or positive) can be defined to adjust the automatic scoll position. 
// The best value must be observed by testing. onlyEndNodes is per default false, thus set this to true if the search should include also parent nodes. 
// The optional parameter dialog is per default empty (""). This parameter can be used for special cases, to bind the treeview to a dynamical created object like a bootstrap modal (pop-up). 
// In such a case this parameter would be dialog:".modal-dialog". 
// Three other optional parameters, EnterKey, enter_key_1 and enter_key_2 are available. 
// EnterKey is per default true and can be set to false. If true the search_button can be triggered with the Enter key. 
// To avoid interference of the Enter key functionality it can be restricted and only be executable if enter_key_1 == enter_key_2. 
// These two parameters can be chosen arbitrarily.

7. Events available.

$("#treeview").on("nodeChecked", function(){
  // when checked

$("#treeview").on("nodeUnchecked", function(){
  // when unchecked

$("#treeview").on("CheckUncheckDone", function(){
  // when checked or unchecked


v2.1.6 (2021-02-08)

  • Added new method skipCheckUncheckDone
  • Bugfix on disable/enable

v2.1.5 (2021-02-01)

  • Added new methods hide / show.
  • Added New feature data-str.

v2.1.4 (2020-11-19)

  • bugfixes disabled nodes

v2.1.1 (2020-10-23)

  • bug fix on disabled nodes which changed color on hover



  • Bugfix


  • Added data-id to div class="hummingbird-treeview-converter" to set individual id's to address the treeview e.g. via $("#treeview_movies").hummingbird();.


  • update enable, disable, li to label and color


  • New method: disableToggle
  • New option: clickGroupsToggle


  • New option: Customizable hover effect.


  • JS Update


  • Added singleGroupOpen option


  • Add font-awesome 5 support


  • Implementation of case-insensitive filter search as default with ability to override. 


  • add font-awesome 5 support


  • add parent nodes containing parent nodes


  • Add nowrap to hummingbird-base class in the CSS


  • add new filter functionality


  • add disable function to filter


  • new getChecked


  • add filter function


  • Support multiple treeviews on one page


  • Some fixes due to the new function that parent nodes can be disabled while the children are enabled. In this case, the disabled parent provides full tri-state functionality. Child nodes can be enabled/disabled on the fly. It is important that enabled parent nodes, which have all children disabled, are not allowed.


  • now always full tri-state functionality for disabled, this cannot be disabled anymore


  • add new option checkboxesGroups and update disableNode and enableNode


  • new getChecked atrr: text
  • use new class name hummingbird-end-node


  • bug fixed on uncheckAll method

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