Question

您正在使用 jsTree 并创建了以下显示的树

现在我想在（n-1 ）节点被选中时禁用 n 节点，即用户无法选择不同级别的节点。

例如：

如果用户选择了Koramangala，那么infosys，埃森哲，TCS，IBM，Wipro及其子节点应该被禁用
如果选择班加罗尔，Koramangala，electronicCity，WhiteField，Marathahally及其子女应该被禁用并禁用美国和美国的同等级别的孩子。英国

是否有可能达到这个要求????

提前致谢

Answer 1

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

你必须这样做：

向jsTree对象添加一些事件 - changed事件以禁用下一级及以下的可见节点，并open_node更新先前隐藏的待禁节点的状态（在DOM中不存在）这一刻确切）
添加conditionalselect插件以禁止节点选择（如果已禁用节点）

我将当前选定的级别保留在var currentlevel中。你应该检查它是否保持在本地。此外，您可以确保优化代码，以便它不会重复启用/禁用功能。

检查演示 - JS Fiddle

Answer 2

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

这里列出了功能

一次只能选择相同级别的节点
如果选择第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" ]
 });

感谢nikolay-ermakov

Answer 3

上面列出的所有其他答案\小提琴适用于大多数情况但只有一种情况。只要所有节点都展开，所有上述方案都可以正常工作（因为一旦折叠节点，它就会从dom中移除）。

假设你在第三级选择一个节点，然后在第三级折叠节点，然后在第一级选择一个节点，系统不会取消选择第3级节点（因为当节点是从dom中删除它时）折叠）并且级别1和3的节点仍处于选中状态。

要解决此问题，我将在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级节点

3 个答案: