2012-10-10 9 views
6

Ich habe ein seltsames Problem mit JSTree und Ajax.JS Baum - select_node funktioniert nicht

generiere ich meinen Baum über eine Ajax/PHP Anforderung, die HTML-Code generiert (mit UL, LI, A-Tags) mit ...

$.ajax({ 
    url: 'ajaxTreeView.php?method=edit&partid='+partId, 
    cache: false, 
    success: function(tree) 
    { 
     $('#treeViewer').html(tree); 
    }}); 

und aktivieren JStree auf dem Code ...

options = 
{ 
    "core": { animation: 120 }, 
    "themes": { theme: 'corral', dots: true }, 
    "types": 
    { 
     "types": 
     { 
      "parent": { "icon": { "image": "images/custom/Legend/node_select.png" } }, 
      "child": { "icon": { "image": "images/custom/Legend/node_select_child.png" } }, 
      "current": { "icon": { "image": "images/custom/Legend/node.png" } } 
     } 
    }, 
    "plugins": [ "html_data", "types", "themes", "ui", "contextmenu", "cookies" ], 
    "ui": { "select_limit" : 1 }, 
    "cookies": { "save_selected" : false } 
}; 

$("#tree").jstree(options); 

Ich kann nicht scheinen, einen Knoten zu bekommen, um leicht zu wählen. Ich habe initially_select versucht, aber das scheint nicht zu funktionieren und ist auch nicht ideal, da ich den Knoten sowieso oft programmatisch auswählen möchte.

ich versucht mit ...

$('#tree').jstree("select_node", '#ref565', true); 

Dies funktioniert, wenn ich die Funktion über einen Hyperlink aufrufen funktioniert aber nicht, wenn ich es nennen, nachdem ich JStree initalise.

ich aus der Addition eine Warnung sehen (all dies geschieht in der Ajax Erfolg Routine) ...

$('#treeViewer').html(tree); 
$("#tree").jstree(options); 
alert('test'); 
$('#tree').jstree("select_node", '#ref565', true); 

..., dass der Baum nicht gemacht hat, bevor der Alarm tritt weg.

ich setTimeOut ...

hinzugefügt
$('#treeViewer').html(tree); 
$("#tree").jstree(options); 
setTimeout(function() {selectNode(565);},1250); 
$('#tree').jstree("select_node", '#ref565', true); 

... das funktioniert.

Ich bin eindeutig dumm. Benutze ich die falsche Syntax? Warum müsste ich eine Verzögerung einstellen, um einen Knoten auszuwählen?

Bitte helfen.

Antwort

9

Wenn Sie bestimmte Knoten nach dem Laden der Struktur auswählen möchten, sollten Sie die initially_select Option des ui Plugins verwenden. Sie haben gesagt, dass Sie es versucht haben, aber ich sehe nicht, dass es in dem von Ihnen geposteten Beispielcode verwendet wird. Sind Sie sicher, dass Sie korrekte IDs angeben?

Um Knoten programmgesteuert auszuwählen, müssen Sie warten, bis die Knoten, die Sie auswählen möchten, zuerst im DOM angezeigt werden. Anstatt einen Timeout-Callback zu verwenden, schätze ich, dass es korrekter ist, an das Ereignis zu binden, das aufgerufen werden sollte, nachdem der Baum geladen wurde und alle Baumelemente im DOM sind .

Beispielcode zeigt Nutzung:

$(function() { 

    $("#tree") 
     .jstree({ 
      // List of active plugins 
      "plugins" : [ 
       "ui" 
      ], 

      // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin 
      // the UI plugin - it handles selecting/deselecting/hovering nodes 
      "ui" : { 
       // this makes the node with ID node_4 selected onload 
       "initially_select" : [ "#ref565" ] 
      }, 
      // the core plugin - not many options here 
      "core" : { 
       // just open those two nodes up 
       // as this is an AJAX enabled tree, both will be downloaded from the server 
       "initially_open" : [ "#ref565" ] 
      } 
     }) 
     .bind("loaded.jstree", function (e, data) { 
        $('#tree').jstree("select_node", '#ref565', true); 
     }) 
}); 
+0

Das ist genau das, was ich wollte, aber ich sehe viele Code, der mit .bind nach einigen googeln beginnt. Ich bin dumm, bedeutet das, dass ich schreiben sollte ... $ ('# Baum'). Jstree.bind ("loaded.jstree", Funktion (Ereignis, Daten)) { $ ('# tree') .jstree ("select_node", "# ref565", true); }); Wenn ja, das funktioniert nicht für mich. –

+0

Ich habe mein Beispiel aktualisiert, das zeigt, wie Sie ein Ereignis binden. Wenn etwas aufgrund eines Codierungsfehlers nicht funktioniert, verwenden Sie den Debugger, um es herauszufinden. –

+0

Vielen Dank. Ich finde es viel einfacher, diese Ereignisse zu verstehen, jetzt merke ich, dass sie bei der Instanziierung des Baumes vorab gebunden werden können. Tolles Beispiel, Prost :) –