如何在jsTree中禁用多选？答案

【问题标题】：How to disable multi selection in jsTree?如何在jsTree中禁用多选？
【发布时间】：2021-06-26 03:04:53
【问题描述】：

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

【问题讨论】：

标签： jquery jstree

【解决方案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();
           }
        }
    });
});

【讨论】：