綁定兩個jstree的chexboxes

Question

我有2個jstree：第一個是添加東西（我的情況是領土），另一個是爲了排除這些領域。

的事情是，我的兩個jstree顯示同樣的東西：一組這樣的領土：my jstrees

但我想，當我選擇在第一jstree（用於添加territoires），例如世界報 - >歐洲 - >法國和espagne，第二個jstree（排除領土）只顯示與我在第一個jstree中檢查過的複選框相同的複選框（例如：monde - > europe - > france and espagne，其他都沒有）

我不諾克斯HOX做，在我的代碼，這裏是我的代碼

<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> 

（這是用於salesforce頁面）

Answer 1

是的，這是可能的。您需要將事件處理程序添加到第一棵樹上，以select和deselect事件。

查看演示 - Fiddle。

的配置可能是這個樣子：

$("#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'] 
    });