Press "Enter" to skip to content

A Tiny and Fast jQuery Treeview Plugin | hummingbird-treeview

hummingbird-treeview is a jQuery plugin that converts nested HTML lists into an expandable, collapsible, searchable, verifiable hierarchical tree structure, with loads of useful options and APIs.

Features:

  • View hierarchical tree structures.
  • Based on simple HTML lists.
  • Three-state logic.
  • Manual and programmatic scanning, deselecting, folding, expanding, etc.
  • Supports n-tuple nodes i.e. even, triple, etc.
  • Supports broken, specified, or undefined nodes.
  • Get specified / unspecified items programmatically.
  • Supports HTML5- * data attribute to include custom data.
  • Supports Font Awesome icons.
  • Search function.

How to make use of it:

1. Create an HTML tree of nested unordered lists like these:

<ul id="treeview">
  <li> <i class="fa fa-plus"></i>
    <label>
      <input id="xnode-0" data-id="custom-0" type="checkbox" />
      node-0 </label>
    <ul>
      <li> <i class="fa fa-plus"></i>
        <label>
          <input  id="xnode-0-1" data-id="custom-0-1" type="checkbox" />
          node-0-1 </label>
        <ul>
          <li>
            <label>
              <input class="hummingbirdNoParent" id="xnode-0-1-1" data-id="custom-0-1-1" type="checkbox" />
              node-0-1-1 </label>
          </li>
          <li>
            <label>
              <input class="hummingbirdNoParent" id="xnode-0-1-2" data-id="custom-0-1-2" type="checkbox" />
              node-0-1-2 </label>
          </li>
        </ul>
      </li>
      <li> <i class="fa fa-plus"></i>
        <label>
          <input  id="xnode-0-2" data-id="custom-0-2" type="checkbox" />
          node-0-2 </label>
        <ul>
          <li>
            <label>
              <input class="hummingbirdNoParent" id="xnode-0-2-1" data-id="custom-0-2-1" type="checkbox" />
              node-0-2-1 </label>
          </li>
          <li>
            <label>
              <input class="hummingbirdNoParent" id="xnode-0-2-2" data-id="custom-0-2-2" type="checkbox" />
              node-0-2-2 </label>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

2. Download and load the jQuery hummingbird-treeview plugin’s files together with the jQuery library into the doc.

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

3. Load the Font Awesome for the required icons.

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

4. Just initialize the plugin and completed it.

$("#treeview").hummingbird();

5. Override 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 <a href="#!">Bootstrap</a>'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 strategies.

// check all nodes
$("#treeview").hummingbird("checkAll");

// uncheck all nodes
$("#treeview").hummingbird("uncheckAll");

// collapse all nodes
$("#treeview").hummingbird("collapseAll");

// expand all nodes
$("#treeview").hummingbird("expandAll");

// check a specific node
$("#treeview").hummingbird("checkNode",{
  attr:"id",
  name: "xnode-0-2-2",
  expandParents:false
});

// uncheck a specific node
$("#treeview").hummingbird("uncheckNode",{
  attr:"id",
  name: "xnode-0-2-2",
  collapseChildren:false
});

// expand a specific node
$("#treeview").hummingbird("expandNode",{
  attr:"id",
  name: "xnode-0-2-2",
  expandParents:false
});

// collapse a specific node
$("#treeview").hummingbird("collapseNode",{
  attr:"id",
  name: "xnode-0-2-2",
  collapseChildren:false
});

// 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
$("#treeview").hummingbird("disableNode",{
  attr:"id",
  name: "xnode-0-2-2",
  state:true
});

// enable a specific node
$("#treeview").hummingbird("enableNode",{
  attr:"id",
  name: "xnode-0-2-2",
  state: false
});

// get checked nodes
var List = [];
$("#treeview").hummingbird(getChecked",{
  attr:"id",
  list: list,
  OnlyFinalInstance:true
});

// get unchecked nodes
var List = [];
$("#treeview").hummingbird(getUnchecked",{
  attr:"id",
  list: list,
  OnlyFinalInstance:true
});

// filter
$("#treeview").hummingbird("filter",{str:".txt|.jpg|test"});

// 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.
$("#treeview").hummingbird("search",{treeview_container:"treeview_container",search_input:"search_input",search_output:"search_output",search_button:"search_button",scrollOffset:-515,onlyEndNodes:false});

7. Events out there.

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

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

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

Collapsible Tree View With Checkboxes, hummingbird treeview Plugin/Github


See Demo And Download

Official Website(hummingbird-dev): Click Here

This superior jQuery/javascript plugin is developed by hummingbird-dev. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *