如果在 jsTree 中选择了任何第 (n-1) 个节点，如何禁用第 n 级节点

Question

您好，我正在使用 jsTree 并创建了如下所示的树

现在我想禁用第 n 个节点，如果 (n-1) 个节点是 selected，即用户无法 select 不同级别的节点。

例如：

如果用户 selected Koramangala，那么 infosys、Accenture、TCS、IBM、Wipro 及其 child 节点应该被禁用
如果班加罗尔 selected、Koramangala、electronicCity、WhiteField、Marathahally 及其 child 应该被禁用，并且在美国和英国禁用相同级别 childs

是否可以达到这个要求？？？？

提前致谢

Answer 1

您可以使用 jsTree 添加到所有 li 元素的属性 - aria-level 属性。它从根元素 1 开始，跨越整棵树，显示每个节点的级别。

你必须这样做：

向 jsTree 对象添加一些事件 - changed 事件禁用下一级及以下的可见节点，open_node 更新先前隐藏的待禁用节点的状态（在DOM 直到这一刻）
添加 conditionalselect 插件以在节点被禁用时禁止节点选择

我在 var currentlevel 中保留了当前选择的级别。您应该检查它是否保存在本地。此外，您当然可以优化代码，使其不会重复 enable/disable 功能。

查看演示 - JS Fiddle

Answer 2

将提供上述要求的解决方案here in jsFfiddle

这里列出了功能

同一时间只能select能
如果select第n级节点，则所有下级节点将被禁用
如果 select 第 n 级节点，之后如果 select 任何更高级别的节点被 selected，那么所有较低级别的节点 selection 将被删除

我在这里添加 jquery 代码

var data = [{"id":"1","text":"India","state":{"opened":false},"parent":"#", "state": { "opened":true } },{"id":"1-1","text":"Banglore", "state": { "opened":true }, "parent":"1"},{"id":"1-1-1","text":"Koramangala","state":{"opened":false},"parent":"1-1"},{"id":"1-1-1-1","text":"Infosys   ","state":{"opened":false},"parent":"1-1-1"},{"id":"1-1-1-1-1","text":"D","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-1-2","text":"E","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-1-3","text":"G","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-3","text":"Accenture ","state":{"opened":false},"parent":"1-1-1"},{"id":"1-1-1-3-8","text":"C","state":{"opened":false},"parent":"1-1-1-3"},{"id":"1-1-1-3:9","text":"E","state":{"opened":false},"parent":"1-1-1-3"},{"id":"1-1-2","text":"Electronic City","state":{"opened":false},"parent":"1-1"},{"id":"1-1-2-2","text":"TCS       ","state":{"opened":false},"parent":"1-1-2"},{"id":"1-1-2-2-4","text":"C","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-5","text":"E","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-6","text":"F","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-7","text":"G","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-3","text":"WhiteField","state":{"opened":false},"parent":"1-1"},{"id":"1-1-3-4","text":"IBM       ","state":{"opened":false},"parent":"1-1-3"},{"id":"1-1-3-4-10","text":"F","state":{"opened":false},"parent":"1-1-3-4"},{"id":"1-1-4","text":"Marathahally","state":{"opened":false},"parent":"1-1"},{"id":"1-1-4-5","text":"Wipro     ","state":{"opened":false},"parent":"1-1-4"},{"id":"1-1-4-5-11","text":"G","state":{"opened":false},"parent":"1-1-4-5"},{"id":"1-2","text":"Chennai","state":{"opened":false},"parent":"1"},{"id":"1-2-5","text":"sholinganallur","state":{"opened":false},"parent":"1-2"},{"id":"1-2-6","text":"Tiruvanmiyur","state":{"opened":false},"parent":"1-2"},{"id":"2","text":"UK","state":{"opened":false},"parent":"#"},{"id":"2-3","text":"London","state":{"opened":false},"parent":"2"},{"id":"3","text":"US","state":{"opened":false},"parent":"#"},{"id":"3-4","text":"Texas","state":{"opened":false},"parent":"3"},{"id":"3-5","text":"Washington","state":{"opened":false},"parent":"3"},{"id":"3-6","text":"California","state":{"opened":false},"parent":"3"}]

$.jstree.defaults.core = {};
var currentlevel;
$('#tree')
    .on('changed.jstree', function (event, data) {
        if( data.action == 'select_node'){ 
            $('#tree').find('li').removeClass('disabled_node');
console.log('select '+ data.node.text);           

            currentlevel = parseInt( $('#'+data.node.id).attr('aria-level') );
            $('#tree').find('li').each( function() {
                if($(this).attr('aria-level') > currentlevel) {
                    $(this).addClass('disabled_node');
                    // remove checks from levels below
                    $('#tree').jstree('deselect_node', '#'+this.id);

                } else if($(this).attr('aria-level') < currentlevel) {
                    // remove checks from levels above
                    $('#tree').jstree('deselect_node', '#'+this.id);
                }  
            });
        }

        if( data.action == 'deselect_node' && data.event && data.event.type === 'click'){    
            // if have other checked nodes at same level - do not enable children
            if ( $('#tree').find('li:not(#'+data.node.id+')[aria-level="'+currentlevel+'"][aria-selected="true"]').length>0 ) {
                return;
            }

            $('#tree').find('li').each( function() {
                if($(this).attr('aria-level') > currentlevel) {
                    $(this).removeClass('disabled_node');   
                }
            }); 
        }
    })
    .on('open_node.jstree', function(event, obj ) {
        $('#'+obj.node.id).find('li').each( function() {           
            if($(this).attr('aria-level') > currentlevel) {
                $(this).addClass('disabled_node');   
            }
        }); 
    })
    .jstree({
    "core" : {
        "data" : data,
        "multiple": true,
        "themes": {
            "url": true,
            "icons": true
        }
    },
    "checkbox" : {
      "three_state" : false
    },
  "conditionalselect" : function (node, event) {
      return !$('#'+node.id).hasClass('disabled_node');
    },
    "plugins" : [ "checkbox","conditionalselect" ]
 });

感谢nikolay-ermakov

Answer 3

上面列出的所有其他 answers\fiddles 在大多数情况下都有效，只有一种情况除外。只要展开所有节点，上述所有场景都可以正常工作（ 因为一旦折叠节点，它就会从 dom 中删除）。

假设你 select 一个节点在三级，然后你折叠节点在三级，然后你 select 一个节点在级别 1，系统不会取消 - select 级别 3 节点（因为它在节点折叠时从 dom 中删除）并且级别 1 和 3 的节点保持 selected.

为了解决这个问题，我在 JSON 调用 level 中向节点发送了一个附加字段，它告诉您节点的当前级别。

var myTree = $('#tree');

myTree .on('changed.jstree', function(event, data) {
      mee.disableTreeNodesAtOtherLevels(event,data,myTree );
    });

disableTreeNodesAtOtherLevels(event,data, tree){
    var currentlevel = parseInt($('#' + data.node.id).attr('aria-level'));
    var selectedNodes = tree.jstree(true).get_selected(true);
    for (var i = 0; i < selectedNodes.length; i++) {
      if(selectedNodes[i].original.level !== currentlevel){
         tree.jstree(true).deselect_node(selectedNodes[i], true);
      }
    }
  }

所有这一切都基于假设您绑定到树的数据有一个属性称为 level

如果在 jsTree 中选择了任何第 (n-1) 个节点，如何禁用第 n 级节点

How to disable nth level node if any (n-1)th node is selected in jsTree

javascript

jquery

jstree