layui一般用于权限管理比较多，但不管博客们使用在哪个方向上，这里给你们一套完整的组件方便直接使用。
一：Layui官网还是有很多案例树形组件- 在线演示 - Layui，想了解的可以点进去了解一下。
二：现在开始记录完整组件，首先展示HTML代码
<!-- 搜索输入框 -->
<div class="layui-inline">
<input type="text" id="tree_name" class="layui-input" autocomplete="off" />
</div>
<!-- 搜索按钮 -->
<button class="layui-btn" id="btn_query">搜索</button>
<!-- 展示节点 -->
<div id="test1" class="demo-tree demo-tree-box"></div>
<!-- 提交 -->
<button class="layui-btn" id="sub" lay-demo="getChecked" lay-submit lay- filter="addGrant">确定</button>三：css样式的话 直接引入layui.css就可以了，可以去官网下载。
四：js功能的实现：
不加任何功能操作：data1的数据可以从官网copy一份过来
<script>
layui.use(['table', 'laydate', 'layer', 'form', 'tree', 'util'], function() {
var laydate = layui.laydate;
var table = layui.table;
var layer = layui.layer;
var form = layui.form;
var tree = layui.tree;
var util = layui.util;
tree.render({
elem: '#test1',//展示节点id名
showCheckbox: true,//节点是否添加选中框
id: 'demoId', //设置id方面后面的重载操作
data: data1,//数据
});
});
</script>模糊查询，搜索框且绑定键盘Enetr
// 绑定键盘Enter
$("#tree_name").keydown(function(e) { //当按下按键时
if (e.keyCode == 13) { //.which属性判断按下的是哪个键，回车键的键位序号为13
$("#btn_query").trigger("click"); //触发搜索按钮的点击事件
switchThing()
}
});
// 点击搜索查询
$('#btn_query').click(function() {
switchThing()
});
// 封装搜索功能
function switchThing() {
var value = $("#tree_name").val();
//console.log('value:', value);
if (value) {
//首选应将文本的颜色恢复正常
var node = $("#test1");
node.find('.layui-tree-txt').css('color', '');
tree.reload('demoId', {}); //重载树，使得之前展开的记录全部折叠起来
$.each(node.find('.layui-tree-txt'), function(index, elem) {
elem = $(elem);
let textTemp = elem.text();
if (textTemp.indexOf(value) !== -1) { //查询相当于模糊查找
elem.addClass("tree-txt-active");
console.log('elem:', elem);
elem.filter(':contains(' + value + ')').css('color',
'#FFB800'); //搜索文本并设置标志颜色
}
});
$.each($("#test1").find('.tree-txt-active'), function(index, elem) {
elem = $(elem);
// 展开所有父节点
elem.parents('.layui-tree-set').each(function(i, item) {
if (!$(item).hasClass('layui-tree-spread')) {
$(item).find('.layui-tree-iconClick:first').click();
}
});
});
}
}获取选中的值
$("#sub").click(function() {
//获取所有选中节点id数组
var checkedData = tree.getChecked('demoId'); //获取选中节点的数据
console.log(checkedData)
var nodeIds = new Array();
nodeIds = getCheckedId(checkedData);
console.log(nodeIds);
});
// 获取所有选中的节点id
function getCheckedId(data) {
var id = "";
$.each(data, function(index, item) {
if (id != "") {
id = id + "," + item.id;
} else {
id = item.id;
}
//item 没有children属性
if (item.children != null) {
var i = getCheckedId(item.children);
if (i != "") {
id = id + "," + i;
}
}
});
return id;
}五，组件完整代码，运行的时候，注意自己本地引入的地址：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layuiTree</title>
<link rel="stylesheet" href="../layui/css/layui.css" />
<script src="../layui/layui.js"></script>
<script src="../js/jquery.3.2.1.js"></script>
<style type="text/css">
html,
body {
padding: 20px;
background-color: #7aa05f;
min-width: 300px;
}
#sub {
margin: 20px 0px;
}
.layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
color: #fff !important;
text-decoration: none;
}
</style>
</head>
<body>
<div class="layui-inline">
<input type="text" id="tree_name" class="layui-input" autocomplete="off" />
</div>
<button class="layui-btn" id="btn_query">搜索</button>
<div id="test1" class="demo-tree demo-tree-box"></div>
<button class="layui-btn" id="sub" lay-demo="getChecked" lay-submit lay- filter="addGrant">确定</button>
<script>
data1 = [{
title: '江西',
id: 1,
children: [{
title: '南昌',
id: 1000,
children: [{
title: '青山湖区',
id: 10001
},
{
title: '高新区',
id: 10002
}
]
},
{
title: '九江',
id: 1001
},
{
title: '赣州',
id: 1002
}
]
},
{
title: '广西',
id: 2,
children: [{
title: '南宁',
id: 2000
}, {
title: '桂林',
id: 2001
}]
}, {
title: '陕西',
id: 3,
children: [{
title: '西安',
id: 3000
}, {
title: '延安',
id: 3001
}]
}
]
layui.use(['table', 'laydate', 'layer', 'form', 'tree', 'util'], function() {
var laydate = layui.laydate;
var table = layui.table;
var layer = layui.layer;
var form = layui.form;
var tree = layui.tree;
var util = layui.util;
//开启节点操作图标，增加、修改、删除
tree.render({
elem: '#test1',
showCheckbox: true,
id: 'demoId', //设置id方面后面的重载操作
data: data1,
edit: ['add', 'update', 'del'], //操作节点的图标
click: function(obj) {
console.log(JSON.stringify(obj.data))
}
});
// 绑定键盘Enter
$("#tree_name").keydown(function(e) { //当按下按键时
if (e.keyCode == 13) { //.which属性判断按下的是哪个键，回车键的键位序号为13
$("#btn_query").trigger("click"); //触发搜索按钮的点击事件
switchThing()
}
});
// 点击搜索查询
$('#btn_query').click(function() {
switchThing()
});
// 封装搜索功能
function switchThing() {
var value = $("#tree_name").val();
//console.log('value:', value);
if (value) {
//首选应将文本的颜色恢复正常
var node = $("#test1");
node.find('.layui-tree-txt').css('color', '');
tree.reload('demoId', {}); //重载树，使得之前展开的记录全部折叠起来
$.each(node.find('.layui-tree-txt'), function(index, elem) {
elem = $(elem);
let textTemp = elem.text();
if (textTemp.indexOf(value) !== -1) { //查询相当于模糊查找
elem.addClass("tree-txt-active");
console.log('elem:', elem);
elem.filter(':contains(' + value + ')').css('color',
'#FFB800'); //搜索文本并设置标志颜色
}
});
$.each($("#test1").find('.tree-txt-active'), function(index, elem) {
elem = $(elem);
// 展开所有父节点
elem.parents('.layui-tree-set').each(function(i, item) {
if (!$(item).hasClass('layui-tree-spread')) {
$(item).find('.layui-tree-iconClick:first').click();
}
});
});
}
}
$("#sub").click(function() {
//获取所有选中节点id数组
var checkedData = tree.getChecked('demoId'); //获取选中节点的数据
console.log(checkedData)
var nodeIds = new Array();
nodeIds = getCheckedId(checkedData);
console.log(nodeIds);
});
});
// 获取所有选中的节点id
function getCheckedId(data) {
var id = "";
$.each(data, function(index, item) {
if (id != "") {
id = id + "," + item.id;
} else {
id = item.id;
}
//item 没有children属性
if (item.children != null) {
var i = getCheckedId(item.children);
if (i != "") {
id = id + "," + i;
}
}
});
return id;
}
</script>
</body>
</html>
六：完整版效果图
