Implement an interactive DropDownTree with user-friendly UI.
The DropDownTree is used to represent data in heirarchical structure, rendered in a tree-like structure, which provides multiple selection option and custom nodes.
Here we are implementing the dropdown tree with bootstrap and jquery with click handlers, data handlers. Single select and Multi-select enabled with children and ajax request for getting data.
The following example is taken from : https://github.com/JosephSKh/DropdownTree
CODE :-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>
Dropdown Tree
</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="dropdowntree.css">
</head>
<body>
<div class="container">
<h1>Dropdown Tree</h1>
<div class="col-md-6">
<hr/>
<h3>Children Select:</h3><div class="dropdown dropdown-tree" id="firstDropDownTree"></div>
</div>
<div class="col-md-6">
</div>
<hr/>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="dropdowntree.js"></script>
<script type="text/javascript">
var arr4=[
{title:"St Fatima",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]}
,
{title:"Korba",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]}
,
{title:"Roxi",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]}
];
var arr3=[
{title:"Abbas Al Akkad",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]}
,
{title:"Makram Obeid",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}],data:arr4}
,
{title:"Mostafa Al Nahas",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]}
];
var arr2=[
{title:"Teriumph",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}] ,data:arr3}
,
{title:"Safir",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]}
,
{title:"El-Hegaz Sq",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]}
];
var arr=[
{title:"Heliopolis",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}], data: arr2}
,
{title:"Nasr City",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]}
,
{title:"Down Town",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}],data:arr3}
];
var options = {
title : "Areas 2",
data: arr,
maxHeight: 300,
clickHandler: function(element){
//gets clicked element parents
console.log($(element).GetParents());
//element is the clicked element
console.log(element);
$("#firstDropDownTree").SetTitle($(element).find("a").first().text());
console.log("Selected Elements",$("#firstDropDownTree").GetSelected());
},
expandHandler: function(element,expanded){
console.log("expand",element,expanded);
},
checkHandler: function(element,checked){
console.log("check",element,checked);
},
closedArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>',
openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>',
multiSelect: true,
selectChildren: true,
}
$("#firstDropDownTree").DropDownTree(options);
</script>
</body>
</html>Explanation :
Download css and js from https://github.com/JosephSKh/DropdownTree
Include the following links :
Bootstrap CSS : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
Fontawesome : https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
jQuery : https://code.jquery.com/jquery-1.9.1.min.js
Bootstrap JS : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
Create a div with id firstDropDownTree
<div class="dropdown dropdown-tree" id="firstDropDownTree"></div>Define values to variables
var arr=[
{title:"Heliopolis",href:"#1",dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}], data: arr2}
,
{title:"Nasr City",href:"#2",dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]}
,
{title:"Down Town",href:"#3",dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}],data:arr3}
];Define options as follows :
var options = {
title : "Areas 2",
data: arr,
maxHeight: 300,
clickHandler: function(element){
//gets clicked element parents
console.log($(element).GetParents());
//element is the clicked element
console.log(element);Call DropDownTree()
$("#firstDropDownTree").DropDownTree(options);For full description please visit : https://github.com/JosephSKh/DropdownTree
Reference : https://github.com/JosephSKh/DropdownTree
For jQuery related solutions please visit jQuery
Thank you.
Thank you