Javascript 绑定两个jstree的chexbox

我有两个jstree：第一个用于添加内容（在我的例子中是Territory），另一个用于排除这些Territory

问题是，我的两个jstree显示了相同的东西：一组类似这样的区域：

但我希望，当我在第一个jstree（用于添加territoires）中选择时，例如monde->europe->france和espagne，第二个jstree（用于排除领土）只显示与我在第一个jstree中选中的复选框相同的复选框（因此，在示例中：monde->europe->france和espagne，没有其他复选框）

在我的代码中我不知道该怎么做，这是我的代码

<script>

    var to = null;
    $("#search-input-exclureTerr").keyup(function() {

        if(to) { clearTimeout(to); }
            to = setTimeout(function() {
              $('#exclureT').jstree(true).search($('#search-input-exclureTerr').val());
            }, 250) ;
    });

    $('#exclureT').jstree({
        'core' : {
            'data' : {
                "url" : "/apex/TerritoiresExclusJSON?droitId={!droitId}&type={!type}",
                "dataType" : "json" // needed only if you do not supply JSON headers
            }
        },
        "search": {
            "case_insensitive": true,
            "show_only_matches" : true
        },
        "plugins" : [ "wholerow", "checkbox", "unique", "search" ]
    });


    function addTerritoires(){

        var territoires = [];

        var instance = $('#exclureT').jstree(true);
        var tableau = instance.get_selected('full');

        for (i = 0; i < tableau.length; i++) {

                territoires.push(tableau[i].id);
        }

        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.RegroupementController.addTerritoires}',
            '{!droitId}',
            '{!type}',
            territoires,
            function(result, event) {
                if (event.type === 'exception')
                    console.log(event.message);
        });

    };
</script>

var-to=null；
$（“#搜索输入“）.keyup（函数（）{
if（to）{clearTimeout（to）；}
to=设置超时（函数（）{
$（'#exclureT'）.jstree（true）.search（$（'#search input exclurer'）.val（））；
}, 250) ;
});
$（'#exclureT'）.jstree({
“核心”：{
“数据”：{
“url”：“/apex/TerritoiresExclusJSON？droitId={！droitId}&type={！type}”，
“数据类型”：“json”//仅当您不提供json头时才需要
}
},
“搜索”：{
“不区分大小写”：正确，
“仅显示匹配项”：真
},
“插件”：[“wholerow”、“checkbox”、“unique”、“search”]
});
函数addTerritioRes（）{
var territoires=[]；
var实例=$（'#exclureT'）.jstree（true）；
var tableau=instance.get_selected（'full'）；
对于（i=0；i

---

（这在salesforce页面中使用）

是的，这是可能的。您需要将事件处理程序添加到第一个树中，以

select

和

deselect

事件

检查演示-

配置可能如下所示：

$("#tree1")
    .on("select_node.jstree", function(e, data) {
        var selectedNodeText = data.node.text;
        $('#exclureT li').each(function() {
            if ($(this).find('a:first').text() === selectedNodeText) {
                // select node in second tree
                $("#exclureT").jstree().select_node(this.id);
                // show node and all parents and children                  
                $(this).parents('li').each(function() {
                    $("#exclureT").jstree().show_node(this.id);
                })

                $(this).find('li').each(function() {
                    $("#exclureT").jstree().show_node(this.id);
                })
                $("#exclureT").jstree().show_node(this.id);
            }
        })
    })
    .on("deselect_node.jstree", function(e, data) {
        var selectedNodeText = data.node.text;
        $('#exclureT li').each(function() {
            if ($(this).find('a:first').text() === selectedNodeText) {
                // deselect node in second tree
                $("#exclureT").jstree().deselect_node(this.id);
                $("#exclureT").jstree().hide_node(this.id);

                // hide parents only if have no visible children
                var hasVisibleNodes = false;
                $("#exclureT").jstree().get_node(this.id).parents.forEach(function(nodeId) {
                    var parentNode = $("#exclureT").jstree().get_node(nodeId);
                    parentNode.children.forEach(function(nodeId) {
                        var childNode = $("#exclureT").jstree().get_node(nodeId);
                        if (!childNode.state.hidden) {
                            hasVisibleNodes = true;
                        }
                    })
                    if (!hasVisibleNodes) {
                        $("#exclureT").jstree().hide_node(nodeId);
                    }
                })

                // hide children
                $(this).find('li').each(function() {
                    $("#exclureT").jstree().hide_node(this.id);
                })
            }
        })

    })
    .jstree({
        "core": {
            "data": data1
        },
        plugins: ['checkbox']
    });

$("#exclureT")
    .on('loaded.jstree', function() {
        // hide all nodes by default
        $("#exclureT").jstree().hide_all();
    })
    .jstree({
        "core": {
            "data": data2
        },
        plugins: ['checkbox']
    });