layui.tree组件的使用以及搜索节点功能的实现

更新时间：2020-09-15 19:36:01 作者：startmvc

由于项目树形节点比较多需要增加节点搜索功能，所以研究了一下加上社区伙伴的支持，目

由于项目树形节点比较多需要增加节点搜索功能，所以研究了一下加上社区伙伴的支持，目前功能可以简单实现但细节还需要修改，添加上了组件的基本使用方法和属性，现在分享出来~

HTML：


<div class="layui-btn-container">
 <button class="layui-btn layui-btn-sm" type="button" lay-demo="getChecked">获取选中节点数据</button>
 <button class="layui-btn layui-btn-sm" type="button" lay-demo="setChecked">勾选指定节点</button>
 <button class="layui-btn layui-btn-sm" type="button" lay-demo="reload">重载实例</button>
</div>
<div class="demoTable">
 <div class="layui-inline">
 <input type="text" class="layui-input" id="tree_name" autocomplete="off" />
 </div>
 <button class="layui-btn" id="btn_query">搜索</button>
</div>
<div id="test1" class="demo-tree demo-tree-box"></div>

JavaScript：


layui.use(['tree', 'util'], function(){
 var $ = layui.$;
 var tree = layui.tree
 ,layer = layui.layer
 ,util = layui.util
 //模拟数据
 ,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
 }]
 },{
 title: '四川（可跳转）'
 ,id: 4
 ,href: 'https://www.layui.com/'
 ,children: [{
 title: '成都'
 ,id: 3000
 ,checked: true //默认选中
 },{
 title: '雅安'
 ,id: 3001
 }]
 }];
 
 //常规用法
 tree.render({
 elem: '#test1' //默认是点击节点可进行收缩
 ,data: data1
 ,id: 'demoId1'
 ,showCheckbox: true //是否显示复选框
 ,isJump: true //是否允许点击节点时弹出新窗口跳转
 ,showLine: true //是否开启连接线
 ,edit: ['add', 'update', 'del'] //开启操作节点的图标
 ,click: function(obj){
 var data = obj.data; //获取当前点击的节点数据
 layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
 }
 });
 
 //按钮事件
 util.event('lay-demo', {
 getChecked: function(othis){
 var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
 
 layer.alert(JSON.stringify(checkedData), {shade:0});
 console.log(checkedData);
 }
 ,setChecked: function(){
 tree.setChecked('demoId1', [3, 4]); //勾选指定节点
 }
 ,reload: function(){
 //重载实例
 tree.reload('demoId1', {});
 }
 });
 
 //搜索节点值
 $('#btn_query').click(function () {
 var name = $("#tree_name").val(); //搜索值
 var elem = $("#test1").find('.layui-tree-txt').css('color', ''); //搜索文本与设置默认颜色
 if (!name) {
 return; //无搜索值返回
 }
 elem.filter(':contains(' + name + ')').css('color', '#FFB800'); //搜索文本并设置标志颜色
 elem.parents('.layui-tree-pack').prev().find('.layui-tree-iconClick').click(); //展开选项
 //console.log(elem);
 })
 
 });

效果如图：