jsTree: progressive_render con ajax/render i nodi da una matrice

Question

Riguarda lo jsTree jQuery plugin. Ho lottato con questo per un po 'ora solo per rendermi conto che è non (nativamente) possibile, quindi ho pensato alla seguente soluzione al mio problema di seguito (che non funziona).

Ho un albero che utilizza il plugin json_data con ajax. Una volta aperto il nodo , il risultato del server è un array di oltre 1000 nodijson. La risposta è abbastanza veloce ma il rendering si prende un po '(l'esperienza dell'utente è che ottiene il fastidioso "script non risponde - stop script/continuare". Messaggio

La soluzione che ho pensato è stato limitare i risultati inviati indietro da il server ad un numero più piccolo (diciamo 200) e usando qualche "mostra altro" etichetta (o usando l'evento di scorrimento jQuery) per recuperare il 200 successivo. Tuttavia, utilizzando il jstree.create su ciascuno di quei nodi appare per essere molto lento. Ho quindi notato questo thread on the jsTree google group in cui Ivan suggerisce che è possibile creare tutti i nodi contemporaneamente usando funzione parse_json - questo non funziona per me.

un codice breve frammento di quello che sto cercando di fare: (quando si fa clic lo "spettacolo più" etichetta):

$.ajax({ 
    // send data to server in order to get the relevant json back 
    }(), 
    success : function (r) { 
      var parent_node = data.inst._get_parent(data.rslt.obj); 
      var id = parent_node.attr("id"); 
      $("#root_tree").jstree("_parse_json", r, parent_node); 
      $("#root_tree").jstree("clean_node", parent_node, false); 
      } 
    }); 

L'esempio di cui sopra non rende l'JSON e aggiunge i bambini a il nodo genitore .

Apprezzerei qualsiasi altro approccio o se qualcuno potesse indicare cosa sto facendo male. Anche in questo caso, utilizzando:

$.each(r, function(i, node) { 
     var id = parent_node.attr("id"); 
     $("#root_tree").jstree("create", "#"+id, "last", node, false, true); 
}); 

funziona, ma molto molto lentamente (più lento di rendering di tutti i 1000 nodi insieme).

Grazie

Answer 1

Ok, quindi il mio utilizzo è stato un po 'fuori.

Quello che ho finito per fare la chiamata alla funzione in vista ad albero invece di ascoltare l'evento:

var ref = parent_node.attr("id"); 
$.each(data, function(i, jsonNode) { 
     var node = inst._parse_json(jsonNode); 
     node.insertInside(ref); 
}); 

Answer 2

Questo è come io ho il mio albero impostare e devo ben più di qualche centinaio di nodi e funziona come un fascino. Ho avuto un problema di prestazioni molto leggero in IE6/7 ma funziona come un campione ovunque.

$('#serverTree').bind("select_node.jstree", function (e, data) { 
     var url = data.rslt.obj.children("a:eq(0)").attr("href"); 
     if (url === "hasChild") { 
      data.inst.toggle_node(data.rslt.obj); 
     } 
     else { 
      //Do something when the leaf nodes are clicked 
     } 

    }).jstree({ 
     "themes": { "theme": "apple", "dots": false, "icons": false }, 
     "json_data": { 
      "ajax": { 
       "url": "/Home/GetNodes", 
       "data": function (n) { 
        return { id: n.attr ? n.attr("id") : 0 }; 
       } 
      } 
     }, 
     "plugins": ["themes", "json_data", "ui"] 
    }); 

Ecco come il mio JSON ritorno dal server appare come:

[{"data":{"title":"Node1","attr":{"id":null,"href":"hasChild"}}, 
"attr":{"id":"Node1","href":null},"state":"closed"}]