Связывание chexboxes из двух jstree

Question

У меня есть 2 jstree: первый для добавления материала (территории в моем случае), а другой - для исключения этих территорий.

Дело в том, что мой два jstree отображаются одни и те же вещи: группа территорий, как то: my jstrees

Но я хочу, чтобы, когда я выбираю в первую 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> 

(используется на странице 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'] 
    });