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.