开源一个常用的树目录和下拉树js组件

我写的一个常用的树目录组件，需要jquery和font-awesome支持，对于想使用自定义图标的可以重定义 fa样式即可，或者直接更换源码的样式名称。

下载地址：https://github.com/junengrong/EasyWebFactoryTree

目录树效果如下：

 准备测试数据源：

   var categorydata = [{
            id: 2,
            title: '陕西' //一级菜单
            , children: [{
                id: 21,
                title: '西安' //二级菜单
            }]
        }, {
            id: 1,
            title: '江西' //一级菜单
            , children: [{
                id: 11,
                title: '南昌' //二级菜单
                , children: [{
                    id: 111,
                    title: '高新区' //三级菜单
                    //…… //以此类推，可无限层级
                }, {
                    id: 1112,
                    title: '高新区2' //三级菜单
                    //…… //以此类推，可无限层级
                }]
            }, {
                id: 11,
                title: '南昌' //二级菜单
                , children: [{
                    id: 111,
                    title: '高新区' //三级菜单
                    //…… //以此类推，可无限层级
                }, {
                    id: 1112,
                    title: '高新区2' //三级菜单
                    //…… //以此类推，可无限层级
                }]
            }]
        }];

常用法

       $("#categorytree").EasyWebFactoryTree({
            data: categorydata,
            itemClick: function (rowdata, $treeitem) {
              // this is click event
                console.log(rowdata);
            }
        });                        

 

下拉树列表效果：

代码

            $("#selectId").EasyWebFactorySelect({
                data: categorydata,
                select: function (item) {
                   // console.log(item);
                }
            });
            //set selected value
            $("#selectId").EasyWebFactorySelectSet("value", "");
            //get selected value 
            var value = $("#selectId").EasyWebFactorySelectGet();
            //get options
            var options= $("#selectId").getOptions();

 

 

做管理后台时，提供了三个浮动按钮：

使用方法很简单，直接添加menuClick事件即会显示浮动按钮


      $("#categorytree").EasyWebFactoryTree({
            data: categorydata,
            menuClick: function (itemdata, mouseEvent) {
               //use this event will display 3 flow button (add,edit,delete)
                var $obj = $(mouseEvent.target); // this is 
                if ($obj.hasClass("fa-remove")) {
                    // delete button is clicked
                } else if ($obj.hasClass("fa-plus")) {
                    // add button is clicked
                } else if ($obj.hasClass("fa-edit")) {
                   // edit button is clicked
                }
                console.log($obj);
            },
            itemClick: function (rowdata, $treeitem) {
              // this is click event
                console.log(rowdata);
            }
        });