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

墨蓝 2021-10-23 12:44 810阅读 0赞

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

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

效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5cF9jb21lb24_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5cF9jb21lb24_size_16_color_FFFFFF_t_70]: /images/20211023/b8126e0af6b4442e91da222eb19c6826.png