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的样式部分结构图