【问题标题】:jstree showing all nodes if search string didn't match any node如果搜索字符串与任何节点都不匹配,jstree 会显示所有节点
【发布时间】:2015-09-15 09:16:34
【问题描述】:

我正在使用以下配置渲染 jstree

$('#deliverables').jstree({
    'core': {
        'data': data
    },
    'search': {
        'case_insensitive': true,
        'show_only_matches' : true
    },
    'plugins': ['search']
});

$('#deliverable_search').keyup(function(){
    $('#deliverables').jstree('search', $(this).val());
});

使用此配置,如果搜索文本找到至少一个节点,则 jstree 仅显示匹配的节点。但是如果搜索文本与任何节点不匹配,jstree 会显示所有节点。我觉得这有点奇怪。我在这里错过了什么吗?

https://jsfiddle.net/t9fe58rt/1/ 链接供您参考。

【问题讨论】:

    标签: javascript jquery jstree jstree-search


    【解决方案1】:

    这是一种故意的行为,请参阅:https://github.com/vakata/jstree/issues/1192#issuecomment-128042329

    但是您可以将处理程序附加到search 事件,如果结果为空,请采取相应的行动,例如。您可以使用hide_all 方法隐藏所有树节点。

    代码:

    .on('search.jstree', function (nodes, str, res) {
        if (str.nodes.length===0) {
            $('#deliverables').jstree(true).hide_all();
        }
    })
    

    但不要忘记在触发新搜索之前将它们全部显示:

    $('#deliverable_search').keyup(function(){
        $('#deliverables').jstree(true).show_all();
        $('#deliverables').jstree('search', $(this).val());
    });
    

    演示:https://jsfiddle.net/xfn8aa19/

    【讨论】:

    • 我应该添加 style.jstree-hidden{ display:none; }
    【解决方案2】:

    对我来说,Irvin Dominin 的回答还不够

     $('#deliverable_search').keyup(function () {
            $('#deliverables').jstree(true).show_all();
            $('.jstree-node').show();
            $('#deliverables').jstree('search', $(this).val());
            $('.jstree-hidden').hide();
            $('a.jstree-search').parent('li').find('.jstree-hidden').show();
        });
    

    【讨论】:

      猜你喜欢
      • 2015-08-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-26
      • 1970-01-01
      • 2017-05-15
      • 2012-05-05
      • 1970-01-01
      相关资源
      最近更新 更多