Expandable Tree View With Checkboxes jQuery Plugin – hummingbird-treeview

by Posted on

Do you want to add tree view feature to display multi category or multi level search in your web app If yes then in this post I am going to share awesome jQuery plugin name hummingbird-treeview. with the help of this plugin you can easily create expandable, collapsible, searchable, checkable, hierarchical tree structure with lots of useful features.

Features:

  • Display hierarchical tree structures.
  • Based on simple pseudo HTML lists or full HTML structures.
  • Tri-state logic.
  • Manual and programmatical check, uncheck, collapse, expand, etc.
  • Supports n-tuple nodes, i.e. doubles, triplets, etc.
  • Supports disabled nodes, checked or unchecked.
  • Get checked/unchecked items programmatically.
  • Supports HTML5 data-* attribute to embed custom data.
  • Supports Font Awesome icons.
  • Search function.



Integrate Expandable Tree View With Checkboxes jQuery Plugin

Libraries

Add the following resources for the hummingbird-treeview to function correctly with dependent libraries.

<!--CSS-->
<link href="https://bootswatch.com/cosmo/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="hummingbird-treeview.css" rel="stylesheet" type="text/css">
 
<!--JS-->
<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script src="hummingbird-treeview.js"></script>

HTML

Bind the hummingbird-treeview to a scrollable DOM element:

<div id="treeview_container" class="hummingbird-treeview" style="height: 230px; overflow-y: scroll;">
    <ul id="treeview" class="hummingbird-base">
	<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="hummingbird-end-node" id="xnode-0-1-1" data-id="custom-0-1-1" type="checkbox" /> node-0-1-1
			    </label>
			</li>
			<li>
			    <label>
				<input class="hummingbird-end-node" 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="hummingbird-end-node" id="xnode-0-2-1" data-id="custom-0-2-1" type="checkbox" /> node-0-2-1
			    </label>
			</li>
			<li>
			    <label>
				<input class="hummingbird-end-node" id="xnode-0-2-2" data-id="custom-0-2-2" type="checkbox" /> node-0-2-2
			    </label>
			</li>
		    </ul>
		</li>
	    </ul>
	</li>
    </ul>
</div>



JS

Finally initialize the plugn and done.

$(function() {  
  $("#treeview").hummingbird();
});

list of options to customize the plugin.

$.fn.hummingbird.defaults.collapsedSymbol= "fa-arrow-circle-o-right";
$.fn.hummingbird.defaults.expandedSymbol= "fa-arrow-circle-o-down";
$.fn.hummingbird.defaults.checkDoubles= true;

See live demo and download source code.

DEMO | DOWNLOAD

This awesome jQuery plugin is developed by hummingbird-dev. Visit their official github repository for more information and follow for future updates.


Published by admin