如何在 jsTree 中禁用多选？

Question

我为 jsTree 插件创建了一个基于 class 选择器的通用代码。我将此插件应用于另一个页面。我只想允许在该特定页面上进行单一选择。我将 multiple 属性设置为 false。但它不起作用。我为某个节点触发了 changed.jstree 事件到 show/hide 事件下拉列表。我试图在那个事件中禁用选择，但那也不起作用。

请帮我解决这个问题。

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", "changed"]
        }).on('search.jstree', function (nodes, str, res) {
            if (str.nodes.length === 0) {
                $(element).jstree(true).hide_all();
            }
        });
    }
});

另一个页面上的jsTree代码：

$(document).ready(function () {
    $('#jsEvent').hide();
    $('#jsRoleTree').jstree({
        checkbox: {
            multiple: false,
        }
    });      
});

       
/* To select an event for event-related roles */
$('#jsRoleTree').on('changed.jstree', function (e, data) {
    $('#jsEvent').hide(); //Hide event dropdown
    var ref = $('#jsRoleTree').jstree(true);
    var nodes = ref.get_checked(); // use method get_checked

    $.each(nodes, function (i, nd) {
        if (nd != data.id)
            ref.disable_checkbox(nd);
    });
    
    //Show event dropdown
    for (i = 0; i < data.selected.length; i++) {
        var selectedNode = $(data.instance.get_node(data.selected[i]).text).text().trim();
        if (selectedNode == '@Constant.EventAdmin' || selectedNode == '@Constant.EventContributor' || selectedNode == '@Constant.EventSubscriber') {
            $('#jsEvent').show(); 
        }
    }
});

Answer 1

我在 https://jsfiddle.net/mrc4fun/0a9r0902/ 的帮助下解决了这个问题。我对 changed.jstree 事件进行了更改。

现在代码如下：

$(document).ready(function () {
    $('#jsEvent').hide();
    $('#jsRoleTree').jstree({
        checkbox: {
            three_state: false,
            cascade: 'none'
        }
    });

    $('#jsRoleTree').on('changed.jstree', function (e, data) {
        $('#jsEvent').hide();
                
        //To allow singe-selection only
        if (data.selected.length > 1) {
            data.instance.uncheck_all(); //will invoke the changed event once
            data.instance.check_node(data.node);/*currently selected node*/
            return;
        }

        //To show the event dropdown
        for (i = 0; i < data.selected.length; i++) {
           var selectedNode = $(data.instance.get_node(data.selected[i]).text).text().trim();
           if (selectedNode == '@Constant.EventAdmin' || selectedNode == '@Constant.EventContributor' || selectedNode == '@Constant.EventSubscriber') {
               $('#jsEvent').show();
           }
        }
    });
});

如何在 jsTree 中禁用多选？

How to disable multi selection in jsTree?

jquery

jstree