如何在jsTree中禁用多选？

Posted 2023-05-09

【中文标题】如何在jsTree中禁用多选？

【英文标题】：How to disable multi selection in 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(); 
        
    
);

【参考方案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();
           
        
    );
);