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

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

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);
        })

    });

效果如图：

搜索功能还有待完善，希望做过类似功能的伙伴多多沟通和分享~