Javascript 如果在jsTree中选择了第（n-1）个节点，如何禁用第n级节点

Hi-am使用jsTree创建了下图所示的树

现在我想禁用第n个节点，如果选择了第n-1个节点，即用户无法选择不同级别的节点

例如：

如果用户选择了Koramangala，则应禁用infosys、Accenture、TCS、IBM、Wipro及其子节点 如果选择班加罗尔，科拉曼加拉、电子城、怀特菲尔德、马拉塔哈利和他们的孩子应该被禁用，并且在美国和英国禁用相同级别的孩子 是否有可能达到这一要求

---

提前感谢

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

您必须这样做：

将一些事件添加到jsTree object-changed事件中，以禁用下一级和下一级的可见节点，并打开_节点以更新之前隐藏在DOM中不存在的待禁用节点的状态 添加条件选择插件以在禁用节点时不允许选择节点 我将当前选择的级别保留在var currentlevel中。你应该检查它是否保存在本地。此外，您当然可以优化代码，使其不会重复启用/禁用功能

---

检查演示-

上述要求的解决方案将可用

这里我列出的功能

一次只能选择相同级别的节点 如果选择N级节点，则将禁用所有较低级别的节点 如果选择N级节点，然后选择任何较高级别的节点，则所有较低级别的节点选择都将被删除 我在这里添加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" ]
 });

---

多亏了

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

假设在第三级选择一个节点，然后在第三级折叠该节点，然后在第1级选择一个节点，则it系统不会取消选择第3级节点，因为在折叠节点时该节点已从dom中删除，并且第1级和第3级的节点仍处于选中状态

为了解决这个问题，我在JSON调用级别向节点发送一个额外的字段，告诉您节点的当前级别

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

的属性的假设，谢谢您的回复。你提供的样品几乎就是我需要的。此时，可以选择一个子节点。但在我的情况下，我需要选择同一级别的多个节点它可以来自任何父节点，但它应该是同一级别的欢迎！使用多个复选框，您需要为选择/取消选择事件中的不同情况提供一些额外的处理。例如，当一个更高级别的选中节点未选中时-如果至少有一个更高级别保持选中状态，则不启用子节点。或者，当您检查一个更高级别的节点时——不仅要禁用子节点，而且如果以前检查过它们，也要取消选中它们——您肯定知道如何启用multiselection——在jsTree配置的核心部分添加multiple:true。谢谢兄弟。还需要一个帮助。i、 e..如果首先我选择了第n个子节点，然后我选择了第n-1个节点。然后我需要取消选择所有第n级节点。我如何才能达到这个要求。我的最新代码将在这里提供您不能使用x:y格式的id-这些是普通的html id。所以我把它修好了。我还修复了一些选择/取消选择的东西。看见我已经把你先前的小提琴修好了。