我写的一个常用的树目录组件，需要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);
}
});