Collapsible Tree View With Checkboxes - jQuery hummingbird-treeview

Collapsible Tree View With Checkboxes - jQuery hummingbird-treeview
File Size: 17.5 KB
Views Total:
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.

How to use it:

1. Create an HTML tree of nested unordered lists as 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 along with the jQuery library into the document.

<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 necessary icons.

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

4. Just initialize the plugn and done.

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

5. Override the global settings.

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

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

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

// Enable the functionality to account for disabled nodes
$.fn.hummingbird.defaults.checkDisabled= true;

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

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

6. API methods.

// 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
});

// 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 available.

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

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

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

Changelog:

2018-10-18

  • add new filter functionality

2018-10-17

  • add disable function to filter

2018-10-11

  • new getChecked

2018-10-10

  • add filter function

2018-07-25

  • Support multiple treeviews on one page

2017-11-18

  • 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.

2017-11-16

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

2017-11-16

  • add new option checkboxesGroups and update disableNode and enableNode

2017-09-01

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

2017-08-30

  • 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.