layui 第三方组件平台

返回首页 发布组件

包括tree的下拉,checkbox,拖拽,右键菜单,手风琴,懒加载

文档

html元素
<div class="eleTree ele1" lay-filter="data1"></div>
<div class="eleTree ele2" lay-filter="data2"></div>
<div class="eleTree ele3" lay-filter="data3"></div>
<button class="layui-btn">获取选中数据</button>
js使用
var eleTree = layui.eleTree;

eleTree.render({
elem: '.ele1',
// url: "/tree",
// type: "post",
data: data,
showCheckbox: true,
contextmenuList: ["copy","add","edit","remove"],
drag: true,
accordion: true
});

eleTree.render({
elem: '.ele2',
// url: "../../data/home/tree.json",
// type: "post",
data: data2,
showCheckbox: true,
contextmenuList: ["add","remove"],
drag: true,
accordion: true
});

eleTree.render({
elem: '.ele3',
data: data3,
showCheckbox: true,
contextmenuList: ["copy","add","edit","remove"],
accordion: true,
lazy: true,
loadData: function(item,callback) {
setTimeout(function() {
k++;
var d = [
{
"label": "d"
}
];
console.log(item);
if(k>=3){
d[0].isLeaf=true;
return void callback(d);
}
callback(d);
}, 500);
}
});

eleTree.on("add(data1)",function(data) {
console.log(data);
// 若后台修改,则重新获取后台数据,然后重载
// eleTree.reload(".ele1", {where: {data: JSON.stringify(data.data)}})
})
eleTree.on("edit(data1)",function(data) {
console.log(data);
})
eleTree.on("remove(data1)",function(data) {
console.log(data);
})
eleTree.on("toggleSlide(data1)",function(data) {
console.log(data);
})
eleTree.on("checkbox(data1)",function(data) {
console.log(data);
})
eleTree.on("drag(data2)",function(data) {
console.log(data);
})
$(".layui-btn").on("click",function() {
console.log(eleTree.checkedData (".ele2"));
})
eleTree.render()参数说明
1. elem:外层容器
2. data:data或url参数二选一,data优先 (静态数据),必选参数
3. url:data或url参数二选一,data优先 (获取数据地址),必选参数
4. type:获取后台数据类型(默认get),可选参数
5. where:ajax附带的额外参数,可选参数
6. showCheckbox:是否启用checkbox,可选参数
7. contextmenuList:右键操作,类型为数组,可选["copy","add","edit","remove"],不写则不启用右键功能
8. drag:是否启用拖拽功能,可选参数,默认关闭
9. accordion: 是否启用手风琴功能,可选参数,默认关闭
10. lazy:开启懒加载功能,可选参数,默认关闭
11. loadData:懒加载回调函数(item,callback),若开启懒加载,则此参数必须(item为点击的dom所对应的数据,callback,回调,最后使用新数据作为callback函数的参数,调用此函数)
外部可使用的函数说明
1. checkedData (elem):获取当前的选择器elem选中的数据
外部可使用的事件说明
1. add(filter):右键添加触发事件
2. edit(filter):右键编辑触发事件
3. remove(filter):右键删除触发事件
4. toggleSlide(filter):展开与合并触发事件
5. checkbox(filter):checkbox被选中触发事件
6. drag(filter):拖拽触发事件
data数据格式
// label: 节点名称
// spread: 是否展开子项
// children: 子元素数组
// disabled: 是否禁用
// checked: 是否选中
// isLeaf: 是否为叶子节点(懒加载时使用)
[
{
label: 'a',
spread: true,
children: [
{
label: 'aa1',
disabled: true,
checked: true,
},
{
label: 'bb1',
}
]
}
]
注意:
1. 所有修改功能只是在前台完成,若要实现后台数据更改,则使用新数据去修改后台重新reload,即 eleTree.reload(".ele1", {where: {data: data.data}});
2. 懒加载功能与拖拽功能还存在一点冲突,尽量不要同时使用
3. 除了拖拽功能,其它功能支持到ie8

在线demo
github源码