Expandable Tree View With Checkboxes jQuery Plugin – hummingbird-treeview

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.

<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">
 

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

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.

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

Related