layui tree 对节点进行搜索

LayUI的tree对节点进行搜索的效果图

需要在使用layui的tree的界面添加的查询代码方法

        //左侧树图
        // 同步(绑定)layui的tree的搜索(过滤)框
        // treeId: tree所在的容器的id
        // filter: 对应的搜索框的selector或者dom对象
        // callback: 回调 参数(树节点jquery对象, 输入框对象, 匹配到的节点数量)
        tree.syncLayuiTreeFilter = function (treeId, filter, callback) {
            let treeElem = $('#' + treeId), filterElem = $(filter);
            if (!filterElem.length || !filterElem.length) {
                return;
            }
            // 搜索框的监听事件按实际需求来
            filterElem.unbind('change').change(function () {
                let that = this; //this;
                let value = $(that).val().trim();
                let HIDE = 'layui-hide';
                let hintClass = 'search_hit';
                // 先恢复现场
                treeElem.find('.' + HIDE).removeClass(HIDE);
                treeElem.find('.' + hintClass).removeClass(hintClass)
                // 如果有值筛选开始
                if (value) {
                    $.each(treeElem.find('.layui-tree-txt'), function (index, elem) {
                        elem = $(elem);
                        let textTemp = elem.text();
                        if (textTemp.indexOf(value) === -1) {
                            // 不存在就隐藏
                            elem.closest('.layui-tree-set').addClass(HIDE)
                        } else {
                            // 命中就添加一个class
                            elem.addClass(hintClass)
                        }
                    });
                    $.each(treeElem.find('.' + hintClass), function (index, elem) {
                        elem = $(elem);
                        // 取消隐藏所有父节点
                        elem.parents('.layui-tree-set').removeClass(HIDE);
                        // 展开所有父节点
                        elem.parents('.layui-tree-set').each(function (i, item) {
                            if (!$(item).hasClass('layui-tree-spread')) {
                                $(item).find('.layui-tree-iconClick :first').click();
                            }
                        });
                    });
                }
                typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);
            });
        };

        tree.syncLayuiTreeFilter('thingModelTree', '[name="searchTree"]', function (treeElem, filterElem, hitNumbers) {
        });

在代码的详细使用如下

                <div class="layui-card-body">
                    <input class="layui-input layui-input-inline" name="searchTree"
                           placeholder="请输入名称回车进行查询">
                    <div id="thingModelTree"></div>
                </div>

<script>
    layui.use(['tree', 'table', 'form', 'layer', 'miniPage'], function () {
        var tree = layui.tree,
            table = layui.table,
            form = layui.form,
            layer = layui.layer,
            miniPage = layui.miniPage,
            $ = layui.$;
        //左侧树图
        // 同步(绑定)layui的tree的搜索(过滤)框
        // treeId: tree所在的容器的id
        // filter: 对应的搜索框的selector或者dom对象
        // callback: 回调 参数(树节点jquery对象, 输入框对象, 匹配到的节点数量)
        tree.syncLayuiTreeFilter = function (treeId, filter, callback) {
            let treeElem = $('#' + treeId), filterElem = $(filter);
            if (!filterElem.length || !filterElem.length) {
                return;
            }
            // 搜索框的监听事件按实际需求来
            filterElem.unbind('change').change(function () {
                let that = this; //this;
                let value = $(that).val().trim();
                let HIDE = 'layui-hide';
                let hintClass = 'search_hit';
                // 先恢复现场
                treeElem.find('.' + HIDE).removeClass(HIDE);
                treeElem.find('.' + hintClass).removeClass(hintClass)
                // 如果有值筛选开始
                if (value) {
                    $.each(treeElem.find('.layui-tree-txt'), function (index, elem) {
                        elem = $(elem);
                        let textTemp = elem.text();
                        if (textTemp.indexOf(value) === -1) {
                            // 不存在就隐藏
                            elem.closest('.layui-tree-set').addClass(HIDE)
                        } else {
                            // 命中就添加一个class
                            elem.addClass(hintClass)
                        }
                    });
                    $.each(treeElem.find('.' + hintClass), function (index, elem) {
                        elem = $(elem);
                        // 取消隐藏所有父节点
                        elem.parents('.layui-tree-set').removeClass(HIDE);
                        // 展开所有父节点
                        elem.parents('.layui-tree-set').each(function (i, item) {
                            if (!$(item).hasClass('layui-tree-spread')) {
                                $(item).find('.layui-tree-iconClick :first').click();
                            }
                        });
                    });
                }
                typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);
            });
        };

        tree.syncLayuiTreeFilter('thingModelTree', '[name="searchTree"]', function (treeElem, filterElem, hitNumbers) {
        });

      $.ajax({
            url: getModelThingTreeUrl,
            type: 'get',
            dataType: 'json',
            success: function (rsp) {
                if ('00000' === rsp.code) {
                    // 渲染左侧树图
                    treeData = rsp.data;
                    var thingModelTree = tree.render({
                        elem: '#thingModelTree',
                        data: treeData,
                        id: 'thingModelTree',
                        isJump: true,
                        click: function (obj) {
                            // 点击树节点时触发
                            nodeId = obj.data.id;
                            nodeName = obj.data.title;
                            // 模拟根据节点 ID 请求右侧列表数据
                            loadTableData(nodeId);
                        },
                        edit: ['add', 'update', 'del'],// 开启节点的右侧操作图标
                        checked: true,
                        customOperate: true,//节点操作是否支持自定义
                        onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                        operate: function (obj) {
                            var type = obj.type; // 得到操作类型：add、edit、del
                            var data = obj.data; // 得到当前节点的数据
                            if (type === 'add') { // 增加节点
                        
                            } else if (type === 'update') { // 修改节点
                               
                            } else if (type === 'del') { // 删除节点
                              
                            }
                        }
                    });
                } else {
                    layer.alert("查询失败。原因：" + rsp.msg);
                }
            },
            error: function (rsp) {
                layer.alert("查询树图失败。原因：" + rsp.msg);
            }
        });
    });

</script>