Tree-style Multi Select Dropdown Plugin For Bootstrap - DropdownTree
File Size: | 9.79 KB |
---|---|
Views Total: | 40530 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

DropdownTree is a jQuery plugin that utilizes Bootstrap dropdown component to create a dynamic, multi-level, multi-select dropdown with checkboxes similar to the tree structure.
How to use it:
1. To use this plugin, make sure you have jQuery library, Bootstrap framework and Font Awesome properly loaded in the document.
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="font-awesome.min.css"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script>
2. Load the jQuery DropdownTree's JavaScript and CSS files in the document.
<link href="dropdowntree.css" rel="stylesheet"> <script src="dropdowntree.js"></script>
3. Prepare your hierarchical data to be presented in the dropdown tree.
const data = [ { title:"HTML5",href:"#1", dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}] }, { title:"JavaScript", href:"#2", dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}], data:subData }, { title:"CSS3", href:"#3", dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}] } ]; var subData = [ { title:"jQueryScript", href:"#1", dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}] }, { title:"AngularJS", href:"#2", dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}] }, { title:"ReactJS", href:"#3", dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}] } ];
4. Create a placeholder element for the dropdown tree.
<div class="dropdown dropdown-tree" id="example">
5. Initialize the dropdown tree plugin and specify the data source.
$("#example").DropDownTree({ data: data });
6. Config the dropdown tree with the following settings.
$("#example").DropDownTree({ // dropdown title title : "Dropdown", // close/open icons closedArrow : '<i class="fa fa-caret-right" aria-hidden="true"></i>', openedArrow : '<i class="fa fa-caret-down" aria-hidden="true"></i>', // max height of dropdown maxHeight : 300, // is multiple select? multiSelect : false, // checks all children of the selected parent selectChildren : false, // if the children are dynamic addChildren: false, // if is RTL(RIGHT TO LEFT)? rtl: false });
7. Possible event handlers to handle select/check/expand events.
$("#example").DropDownTree({ clickHandler : function(target){}, expandHandler : function(target,expanded){}, checkHandler : function(target,checked){}, });
Changelog:
2020-02-09
- fix click on checkbox on mobile
This awesome jQuery plugin is developed by JosephSKh. For more Advanced Usages, please check the demo page or visit the official website.