JsTree Otwórz węzeł, a następnie wybierz węzeł podrzędny (używając json_result)

Question

Mam problem z JsTree używam w projekcie MVC2. Chciałbym utworzyć funkcję, aby odznaczyć/zamknąć wszystkie węzły na drzewie. Następnie otwórz określony węzeł i wybierz określony węzeł podrzędny (Mam wartości Id dla obu).

Problem polega na tym, że selektor jest zawsze wywoływany przed zakończeniem parametru open_node, więc węzeł nie jest wybrany, ponieważ drzewo jeszcze nie załadowało danych, a identyfikator węzła nie istnieje.

Najpierw wypróbowałem tę funkcję.

$('#demo3').jstree('deselect_all'); 
$('#demo3').jstree('close_all'); 
$('#demo3').jstree("open_node", $('#ParentId'), false, true); 
$('#demo3').jstree("select_node", $('#ChildId')); 

Następnie próbowałem przenieść kod do powiązań select_node i move_node drzewa, ale bez powodzenia. W tej chwili utknąłem przy użyciu setTimeout(), co jest okropnym rozwiązaniem.

Czy ktoś wie, w jaki sposób mogę powiedzieć drzewu, aby wybrał tylko węzeł po zakończeniu otwierania?

Answer 1

można spróbować przekazując funkcję, która wybiera węzeł jako zwrotnego jak:

$('#demo3').jstree('open_node', '#ParentID', function(e, data) { 
    $('#demo3').jstree('select_node', '#ChildId'); 
}, true); 

Ten sposób select_node zostanie wywołana po open_node zwraca sukces.

Answer 2

Obecnie używam go w projekcie MVC4.

jeśli skonfigurujesz funkcję open_node, aby załadować węzeł JSON (w "rdzeniowej" wtyczce, którą ustawiłeś load_open na true), to nowy dodany węzeł istnieje po stronie serwera, ale jego element DOM nadal nie jest, ponieważ open_node funkcja nie kończy tego zadania. Dlatego musisz poczekać lub użyć drugiego parametru (oddzwanianie powodzenia). W wywołaniu zwrotnym nowy węzeł renderowany w drzewie DOM i jego selektor jest poprawny.

jsTree Przykładowa konfiguracja:

"core": { 
    "open_parents": true, 
    "load_open": true 
} 

Mój kod roboczych:

$("iframe#UploadTarget").load(function() { 
    var result = jQuery.parseJSON($(this).contents().text()); 
    if (result.Result == true) { 
    $("#uploadDialog").dialog("close"); 
    var tree = jQuery.jstree._focused(); 

    /* 
     open_node will open the parent, get the childs from the server 
     (controller) and renders the new item before the callback executed, 
     so the jQuery selector will be valid 
    */ 

    tree.open_node(result.ParentId,/*CALLBACK*/ function() { 
      var newNode = $("#" + result.Id); 
      tree.select_node(newNode, false, null); 
    }); 

    } else { 
     alert(result.Result + ":" + result.ResultDescription); 
    } 

});//GOOD LUCK :-) 

Answer 3

nadzieja, że ​​to może pomóc i przepraszam nie używam json. Używam jstree wraz z funkcją do otwierania węzłów poprzez klikanie elementów poza html jstree.

każdy węzeł w naszej konfiguracji jest jak strona internetowa, więc na stronie głównej pulpitu mamy listę ostatnio edytowanych stron.

każdy z tych linków jest to skrypt do wykonania

<a href="javascript: selectLeftNavNode(339);">Edit</a> 

gdzie 339 to identyfikator strony chcemy edytować

i jest to funkcja FHE które kiedyś być wykonywane

function selectLeftNavNode(node) { 
     $('#demo').jstree('deselect_all'); 
     $('#demo').jstree('select_node', '#node_' + node); 
} 

problem, który ostatnio zauważyliśmy, że jeśli ostatnio edytowana strona znajduje się głęboko w drzewie, w sekcji, która nie została jeszcze załadowana, to się nie powiedzie

dlatego postanowiłem zrobić ajax żądanie do serwera w celu pobrania wszystkich rodzic identyfikatora

zmienił kod poniżej, ajax w moim przypadku będzie powrócić coś jak to patrząc xml

<?xml version="1.0" encoding="UTF-8"?> 
<response> 
<paths> 
<path>339</path> 
<path>338</path> 
<path>38</path> 
</paths> 
</response> 

a funkcja

function selectLeftNavNode(node) { 
     $('#demo').jstree('deselect_all'); 
     if($('#demo').jstree('select_node', '#node_' + node) === false) 
     { 
      // if it is false means that the node is not yet rendered 
      // so instead of loading we will require to get list of parent nodes to open in order, then it will become available 
      // an ajax call should get us all the nodes 
      $.ajax({ 
       type: "POST", 
       dataType: "xml", 
       url: your_url_to_php_script', 
       data: {node_id:node}, 
       success: function(data) 
       { 
        var remaining_nodes = new Array(); 
        var paths_count = $(data).find('response').find('path').length; 
        for(var x=1;x<=paths_count;x++){ 
         remaining_nodes[x-1] = $(data).find('response').find('paths path:nth-child('+x+')').text(); 
        } 

        open_nodes_step_by_step(remaining_nodes); 
       } 
      }); 
     } 
    } 

i oprócz tej funkcji, która jest przelotowe na wywołania zwrotne z open_node funkcja otwiera węzeł przez węzeł i kiedy trafi t on ostatni wpis, który powinien być rzeczywisty identyfikator węzła chcemy wybrać użyje select_node zamiast

function open_nodes_step_by_step(remaining_nodes) 
{ 
    var nodes = remaining_nodes.slice(); 
    tree = jQuery.jstree._focused(); 
    if(nodes.length > 1){ 
     var nodes_left = remaining_nodes.slice(); 
     nodes_left.pop(); 
     var to_open = nodes.length - 1; 
     tree.open_node(document.getElementById('node_' + nodes[to_open]), /*CALLBACK*/ function() { 
      open_nodes_step_by_step(nodes_left); 
     }); 
    } 
    else{ 
     tree.select_node('#node_' + nodes[0]); 
    } 
} 

Ja testowałem moje rozwiązanie z IE8, FF i Chrome wszystko wydaje się działać dobrze, na górze, że i używaj jQuery v1.10.1 i jsTree 1.0-rc1 (niestety, ponieważ kod istnieje od lat i ma całą bazę danych i inne integracje postanowiłem nie zmieniać na nowsze wersje, działa)

mam nadzieję, że pomogłem ktoś

Tom