A checkbox With Collapsible Tree View- jQuery Hummingbird-Treeview

File Size:14.57 KB
Views Total:1,226
Last Update:December 25, 2017
Publish Date:December 25, 2017
Official Website:Go to website
License:MIT

A jQuery plugin that transforms and changes all the nested HTML lists into the example, collapsible and the searchable with the checkable and the hierarchical tree structure is known as hummingbird-treeview. It has a structure with lots of useful options and APIs. Hummingbird-treeview covers the 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-tree view plugin’s files along :

<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 Icons :

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

4. Just initialize the plugin and done :

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

5. Override the global settings :

// Collapsed Symbol
$.fn.hummingbird.defaults.collapsedSymbol= "fa-arrow-circle-o-right";

// Expand Symbol
$.fn.hummingbird.defaults.expandedSymbol= "fa-arrow-circle-o-down";

// Enable the functionality to account for multi-doubles
$.fn.hummingbird.defaults.checkDoubles= true; 

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

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

7. Events available :

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

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

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

Done 🙂

Change Log

2017-12-01

  • add id and data-id options

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