layui-支持搜索的树形组件eleTree实现
目录
layui 支持搜索的树形组件eleTree实现
没有废话直接上效果图，如果符合需求就往下看吧。
H5代码
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" id="getChecked" >勾选指定节点</button>
</div>
<input type="text" placeholder="请输入关键字进行搜索" autocomplete="off" class="layui-input eleTree-search" >
<div class="eleTree ele6" lay-filter="data6" id="treeInfo" ></div>js代码
<script>
layui.config({
base: "/admin/lib/layui/lay/mymodules/"
}).use(['eleTree' ], function(){
var $ = layui.jquery;
var eleTree = layui.eleTree;
var data=[
{
"id": 1,
"label": "dababase1",
spread: false,
"children": [
{
"id": 2,
"label": "table1",
//"disabled": true,
"children": [
{
"id": 3,
"label": "id"
},
{
"id": 4,
"label": "name"
//"checked": true
}
]
},
{
"id": 22,
"label": "table2",
"children": [
{
"id": 23,
"label": "sex"
},
{
"id": 24,
"label": "age",
"checked": true
}
]
}
]
},
{
"id": 10,
"label": "dababase2",
"children": [
{
"id": 12,
"label": "table1",
"children": [
{
"id": 13,
"label": "status"
},
{
"id": 14,
"label": "id"
}
]
}
]
}
];
$(".eleTree-search").keydown(function(){
el6.search($(this).val());
});
$(".eleTree-search").keyup(function(){
el6.search($(this).val());
});
var el6=eleTree.render({
elem: '#treeInfo',
data: data,
id: 'demoId1',
showCheckbox: true,
defaultExpandAll: true,
defaultCheckedKeys: [23,24],
searchNodeMethod: function(value,data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
});
//获取指定的选中信息
$("#getChecked").click(function(){
var checkedData = el6.getChecked(false,true); //获取选中节点的数据
layer.alert(JSON.stringify(checkedData), {shade:0});
console.log(checkedData);
});
});
</script>引入文件
<link rel="stylesheet" href="/admin/lib/layui/css/eleTree.css">
<script src="/admin/lib/layui/layui.js" charset="utf-8"></script>layui的样式部分结构图
