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

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

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

目录树效果如下：

 准备测试数据源：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

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);
            }
        });