dropdowntree.js是一个动态下拉菜单选择插件-BFW插件库

dropdowntree.js是一个动态下拉菜单选择插件
dropdowntree.js是一个动态下拉菜单插件，基于Bootstrap和jQuery以及click处理程序和数据处理程序。您可以选择单个或多个项目，也可以使用ajax请求绑定远程数据。
使用方式：
第一步引入bfwone 加载依赖项jquery及bootstrap
第二步use插件及css和主题css
第三步配置参数
属性	类型	默认值	描述
title	string	Dropdown	标题
clickHandler	function	null	点击回调函数
checkHandler	function	null	选择回调函数
expandHandler	function	null	展开后的回调函数
maxHeight	int	300	下拉框最大高度
closedArrow	string	null	数据
closedArrow	html string	<i class="fa fa-caret-right" aria-hidden="true"></i>	关闭后菜单前面的图标
openedArrow	html string	<i class="fa fa-caret-down" aria-hidden="true"></i>	打开后的菜单前面的图标
multiSelect	boolean	false	是否允许多选
selectChildren	boolean	false	全选所有
addChildren	boolean	false	是否动态生成数据
rtl	boolean	false	是否从右边开始显示
示例代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.2.11|bootstrap-3.3.4&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["dropdowntree", "font-awesome-4.7.0/css/font-awesome.min|bootstrap.3.3.4|dropdowntree"], function() {


                /////////////////////////// normal user code

                var arr4 = [{
                    title: "王丽", href: "#1", dataAttrs: [{
                        title: "dataattr1", data: "value1"
                    }, {
                        title: "dataattr2", data: "value2"
                    }, {
                        title: "dataattr3", data: "value3"
                    }]},
                    {
                        title: "黄芪", href: "#2", dataAttrs: [{
                            title: "dataattr4", data: "value4"
                        }, {
                            title: "dataattr5", data: "value5"
                        }, {
                            title: "dataattr6", data: "value6"
                        }]},
                    {
                        title: "孙晓", href: "#3", dataAttrs: [{
                            title: "dataattr7", data: "value7"
                        }, {
                            title: "dataattr8", data: "value8"
                        }, {
                            title: "dataattr9", data: "value9"
                        }]}];

                var arr3 = [{
                    title: "王五", href: "#1", dataAttrs: [{
                        title: "性别", data: "value1"
                    }, {
                        title: "年龄", data: "value2"
                    }, {
                        title: "昵称", data: "value3"
                    }]},
                    {
                        title: "同事", href: "#2", dataAttrs: [{
                            title: "备注", data: "value4"
                        }, {
                            title: "人数", data: "value5"
                        }, {
                            title: "地区", data: "value6"
                        }], data: arr4
                    },
                    {
                        title: "小四", href: "#3", dataAttrs: [{
                            title: "性别", data: "value7"
                        }, {
                            title: "年龄", data: "value8"
                        }, {
                            title: "昵称", 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);




                var options2 = {
                    title: "请选择好友",
                    data: arr3,
                    maxHeight: 3000,
                    clickHandler: function(element) {
                        //gets clicked element parents
                        console.log($(element).GetParents());
                        //element is the clicked element
                        console.log(element);
                        $("#firstDropDownTree2").SetTitle($(element).find("a").first().text());
                        console.log("Selected Elements", $("#firstDropDownTree2").GetSelected());
                    },
                    closedArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>',
                    openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>',
                    multiSelect: true,
                }


                $("#firstDropDownTree2").DropDownTree(options2);


                var options3 = {
                    title: "Areas 3",
                    data: arr3,
                    maxHeight: 300,
                    expandHandler: function(element, expanded) {
                        if (expanded) {
                            $("#firstDropDownTree3").AddChildren(element, arr3);
                        }
                    },
                    closedArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>',
                    openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>',
                    selectChildren: true,
                    multiSelect: true,
                    addChildren: true,
                }


                $("#firstDropDownTree3").DropDownTree(options3);



                var arr6 = [{
                    title: "مصر الجديدة",
                    href: "#1",
                    dataAttrs: [{
                        title: "dataattr1",
                        data: "value1"
                    },
                        {
                            title: "dataattr2",
                            data: "value2"
                        },
                        {
                            title: "dataattr3",
                            data: "value3"
                        }]},
                    {
                        title: "مدينة نصر",
                        href: "#2",
                        dataAttrs: [{
                            title: "dataattr4",
                            data: "value4"
                        },
                            {
                                title: "dataattr5",
                                data: "value5"
                            },
                            {
                                title: "dataattr6",
                                data: "value6"
                            }]},
                    {
                        title: "العباسية",
                        href: "#3",
                        dataAttrs: [{
                            title: "dataattr7",
                            data: "value7"
                        },
                            {
                                title: "dataattr8",
                                data: "value8"
                            },
                            {
                                title: "dataattr9",
                                data: "value9"
                            }]}];

                var arr5 = [{
                    title: "القاهرة",
                    href: "#1",
                    dataAttrs: [{
                        title: "dataattr1",
                        data: "value1"
                    },
                        {
                            title: "dataattr2",
                            data: "value2"
                        },
                        {
                            title: "dataattr3",
                            data: "value3"
                        }],
                    data: arr6
                },
                    {
                        title: "الجيزة",
                        href: "#2",
                        dataAttrs: [{
                            title: "dataattr4",
                            data: "value4"
                        },
                            {
                                title: "dataattr5",
                                data: "value5"
                            },
                            {
                                title: "dataattr6",
                                data: "value6"
                            }]},
                    {
                        title: "الأسكندرية",
                        href: "#3",
                        dataAttrs: [{
                            title: "dataattr7",
                            data: "value7"
                        },
                            {
                                title: "dataattr8",
                                data: "value8"
                            },
                            {
                                title: "dataattr9",
                                data: "value9"
                            }]}];

                var options4 = {
                    title: "المناطق 4",
                    data: arr5,
                    maxHeight: 300,
                    closedArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>',
                    openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>',
                    selectChildren: true,
                    multiSelect: true,
                    rtl: true,
                    clickHandler: function(element) {
                        //gets clicked element parents
                        console.log($(element).GetParents());
                        //element is the clicked element
                        console.log(element);
                        $("#firstDropDownTree4").SetTitle($(element).find("a").first().text());
                        console.log("Selected Elements", $("#firstDropDownTree4").GetSelected());
                    },
                }

                $("#firstDropDownTree4").DropDownTree(options4);

            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <h1>
        dropdowntree.js是一个动态下拉菜单插件，基于Bootstrap和jQuery以及click处理程序和数据处理程序。您可以选择单个或多个项目，也可以使用ajax请求绑定远程数据。</h1>
    <h3>Basic Example:</h3><div class="dropdown dropdown-tree" id="firstDropDownTree2"></div>
    <h3>Children Select:</h3><div class="dropdown dropdown-tree" id="firstDropDownTree"></div>
    <h3>Add Children:</h3><div class="dropdown dropdown-tree" id="firstDropDownTree3"></div>
    <h3>RTL:</h3><div class="dropdown dropdown-tree" id="firstDropDownTree4"></div>

</body>
</html>
官网 https://github.com/JosephSKh/DropdownTree