如何在jsTree中禁用多选？

如何解决如何在jsTree中禁用多选？

我为 jsTree 插件创建了一个基于类选择器的通用代码。我将此插件应用到另一个页面。我想只允许在该特定页面上进行单个选择。我将 multiple 属性设置为 false。但它不起作用。我触发了 changed.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","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(); 
        }
    }
});

解决方法

我在 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();
           }
        }
    });
});