Dropdown Tree

Basic Example:

Children Select:

Add Children:

RTL:

Init:

HTML:


<div class="dropdown dropdown-tree" id="firstDropDownTree"></div>

JavaScript:


var arr=[
{title:1,dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]},
{title:2,dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]},
{title:3,dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]}
];
var options = {
    title : "DropDown Tree",
    data: arr,
    clickHandler: function(element){
        console.log(element);
    },
}
$("#firstDropDownTree").DropDownTree(options);

Properties:

Property	Type	Default Value	Effect
title	string	Dropdown	The title of the dropdown
clickHandler	function	null	Function which will be passed and handle an element click, pass a element variable and this will return the clicked element
checkHandler	function	null	Function which will be passed and handle an element check, pass a element variable and this will return the clicked element, the second parameter is a bool which will tell the checked status
expandHandler	function	null	Function which will be passed and handle an element expand, pass a element variable and this will return the clicked element, the second parameter is a bool which will tell the expand status
maxHeight	int	300	The maximum height of the dropdown ul
closedArrow	string	null	The array of data which will be passed to the dropdown
closedArrow	html string	<i class="fa fa-caret-right" aria-hidden="true"></i>	if a li has a sub menu this will be the icon of the closed arrow when closed .. defaults to font awesome
openedArrow	html string	<i class="fa fa-caret-down" aria-hidden="true"></i>	if a li has a sub menu this will be the icon of the opened arrow when opened
multiSelect	boolean	false	adds checkboxes and allows multi selection for multi elements in the dropdown
selectChildren	boolean	false	will check all children of the selected parent
addChildren	boolean	false	will tell the plugin if that the children are dynamic .. defaults to false .. set to true if you will use AddChildren()
rtl	boolean	false	will tell the plugin if the page is RTL .. defaults to `false` .. you need to add rtl-bootstrap as well

Property

Type

Default Value

Effect

title

string

Dropdown

The title of the dropdown

clickHandler

function

null

Function which will be passed and handle an element click, pass a element variable and this will return the clicked element

checkHandler

function

null

Function which will be passed and handle an element check, pass a element variable and this will return the clicked element, the second parameter is a bool which will tell the checked status

expandHandler

function

null

Function which will be passed and handle an element expand, pass a element variable and this will return the clicked element, the second parameter is a bool which will tell the expand status

maxHeight

int

300

The maximum height of the dropdown ul

closedArrow

string

null

The array of data which will be passed to the dropdown

closedArrow

html string

if a li has a sub menu this will be the icon of the closed arrow when closed .. defaults to font awesome

openedArrow

html string

if a li has a sub menu this will be the icon of the opened arrow when opened

multiSelect

boolean

false

adds checkboxes and allows multi selection for multi elements in the dropdown

selectChildren

boolean

false

will check all children of the selected parent

addChildren

boolean

false

will tell the plugin if that the children are dynamic .. defaults to false .. set to true if you will use AddChildren()

rtl

boolean

false

will tell the plugin if the page is RTL .. defaults to `false` .. you need to add rtl-bootstrap as well