javascript - 如何通过节点 ID 取消选择 jsTree 复选框

Question

我们如何能够通过 jsTree 中的节点 ID 取消选择节点复选框。

如果选择了父节点复选框，我需要取消选择节点复选框。

我使用了下面提到的代码，但它不起作用

$('#tree').find('li').each( function() {
            //$('#tree').uncheck_node($(this).id);
            $('#tree').jstree("uncheck_node", "#"+$(this).id);

        });

Here is my working code.

Answer 1

我查看了您的 jsfiddle 并根据我对您正在寻找的内容的解释对其进行了修改。

看一下 jsfiddle

var data = [{"id":"Region:1","parent":"#","text":"India","state":null},{"id":"Location:1","parent":"Region:1","text":"Banglore","state":{"opened":false}},{"id":"Branch:1","parent":"Location:1","text":"Koramangala","state":{"opened":false}},{"id":"Server:1","parent":"Branch:1","text":"Infosys   ","state":{"opened":false}},{"id":"Share:1","parent":"Server:1","text":"D","state":{"opened":false}},{"id":"Share:2","parent":"Server:1","text":"E","state":{"opened":false}},{"id":"Share:3","parent":"Server:1","text":"G","state":{"opened":false}},{"id":"Server:3","parent":"Branch:1","text":"Accenture ","state":{"opened":false}},{"id":"Share:8","parent":"Server:3","text":"C","state":{"opened":false}},{"id":"Share:9","parent":"Server:3","text":"E","state":{"opened":false}},{"id":"Branch:2","parent":"Location:1","text":"Electronic City","state":{"opened":false}},{"id":"Server:2","parent":"Branch:2","text":"TCS       ","state":{"opened":false}},{"id":"Share:4","parent":"Server:2","text":"C","state":{"opened":false}},{"id":"Share:5","parent":"Server:2","text":"E","state":{"opened":false}},{"id":"Share:6","parent":"Server:2","text":"F","state":{"opened":false}},{"id":"Share:7","parent":"Server:2","text":"G","state":{"opened":false}},{"id":"Branch:3","parent":"Location:1","text":"WhiteField","state":{"opened":false}},{"id":"Server:4","parent":"Branch:3","text":"IBM       ","state":{"opened":false}},{"id":"Share:10","parent":"Server:4","text":"F","state":{"opened":false}},{"id":"Branch:4","parent":"Location:1","text":"Marathahally","state":{"opened":false}},{"id":"Server:5","parent":"Branch:4","text":"Wipro     ","state":{"opened":false}},{"id":"Share:11","parent":"Server:5","text":"G","state":{"opened":false}},{"id":"Location:2","parent":"Region:1","text":"Chennai","state":{"opened":false}},{"id":"Branch:5","parent":"Location:2","text":"sholinganallur","state":{"opened":false}},{"id":"Branch:6","parent":"Location:2","text":"Tiruvanmiyur","state":{"opened":false}},{"id":"Region:2","parent":"#","text":"UK","state":null},{"id":"Location:3","parent":"Region:2","text":"London","state":{"opened":false}},{"id":"Region:3","parent":"#","text":"US","state":null},{"id":"Location:4","parent":"Region:3","text":"Texas","state":{"opened":false}},{"id":"Location:5","parent":"Region:3","text":"Washington","state":{"opened":false}},{"id":"Location:6","parent":"Region:3","text":"California","state":{"opened":false}}];
$.jstree.defaults.core = {};
var currentlevel = 5;
var updatedLevel;

$(".search-input").keyup(function() {
    var searchString = $(this).val();
    console.log(searchString);
    $('#tree').jstree('search', searchString);
});
	
$('#tree').on('changed.jstree', function (event, data) {
    var $lis = $('[id="'+data.node.id+'"] ul li');
    if (data.action == 'select_node'){
        $lis.removeClass('disabled_node');
        $lis.each(function (index, item) {
            $(item).addClass('disabled_node');
            $('#tree').jstree("uncheck_node", item);
            $('#tree').jstree("disable_checkbox", item);
        });
    }
    if (data.action == 'deselect_node'){ 
        $lis.each(function (index, item) {
            $(item).removeClass('disabled_node');
            $('#tree').jstree("enable_checkbox", item);
        });
    }
}).on('open_node.jstree', function (event, obj) {
    $('#tree').find('li').each(function() {
        if ($(this).attr('aria-level') > currentlevel) {
            $(this).addClass('disabled_node');  
            //$('#tree').disable_checkbox($(this).id);
        } else {
            $(this).removeClass('disabled_node'); 
        }
    });
}).jstree({
    "core" : {
        "data" : data,
        "multiple": true,
        "themes": {
            "url": true,
            "icons": true
        }
    },
    "checkbox" : {
        "three_state" : false
    },
    "conditionalselect" : function (node, event) {
        var level = node.parents.length;
        if (level > currentlevel) {
            return false;
        } else {
            return true;
        }
    },
    "search": {
        "case_insensitive": true,
        "show_only_matches" : true
    },
    "plugins" : [ "checkbox","search", "conditionalselect" ]
 });

$("#showID").click(function(){
    var checked_ids = $('#tree').jstree('get_checked');
    alert(checked_ids);
});

.disabled_node {
    color: #ddd;
}

<div id="tree"></div>