在 jsTree 中只显示匹配的节点

问题描述

我有一个基于 jsTree 插件的类选择器的通用代码。我在另一个 cshtml 页面中使用了 jsTree。我只想在 jsTree 中显示匹配的节点。我已经设置了只显示匹配节点的选项，但它不起作用。

有人可以帮我吗？

$(".jsTree").each(function (index,element) {
    if ($(element).data("isProcessed") != "1" && $(element).attr("isProcessed") != 1) {
        $(element).data("isProcessed","1");
        $(element).attr("isProcessed","1");
        $(this).jstree({
            core:
            {
                check_callback: true
            },checkBox:
            {
                keep_selected_style: true,three_state: ($(element).data("three-state") == "false" ? false : true)
            },search:
            {
                case_insensitive: true,show_only_matches: true
            },plugins: ["checkBox","search"]
        }).on('search.jstree',function (nodes,str,res) {
            if (str.nodes.length === 0) {
                $(element).jstree(true).hide_all();
            }
        });
    }
});

$(document).ready(function () {
    $('#jsroletree_search').keyup(function () {
        $('#jsRoleTree').jstree(true).show_all();
        $('#jsRoleTree').jstree('search',$(this).val());
    });
});

解决方法

我有时在公共代码中遇到同样的问题 jsTree 不允许在同一页面上再有一个实例。

能否请您更换您的代码

$(document).ready(function () {
    $('#jsroletree_search').keyup(function () {
        $('#jsRoleTree').jstree(true).show_all();
        $('#jsRoleTree').jstree('search',$(this).val());
    });
});

到

$(document).ready(function () {
    $('#jsroletree_search').keyup(function () {
    $('#jsRoleTree').jstree(true).show_all();
    $('#jsRoleTree').jstree('search',$(this).val());
    $('#jsRoleTree .jstree-hidden').hide();    
  });
});