2010-08-16 12 views
6

Ho un codice in cui ho bisogno della possibilità di aggiungere nodi figlio a un jstree che a loro volta contiene figli. Il codice seguente aggiunge un nodo "child2" correttamente a "child1" ma ignora i dati child3. Qualsiasi aiuto molto apprezzato. Il codice segue:jstree - aggiunta di nodi figlio che contengono essi stessi bambini

<html> 
<head> 
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.js"></script> 
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(function() { 
     $("#tree").jstree({ 
      "json_data" : { 
       "data" : [ 
        { 
         "data" : "parent", 
         "attr" : { "id" : "root.id" }, 
         "children" : [ { "data" : "child1", 
             "attr" : { "id" : "child1.id" }, 
             "children" : [ ] } 
            ] 
        }, 
       ] 
      }, 
      "plugins" : [ "themes", "json_data", "crrm" ] 
     }); 
    }); 
    $("#add").click(function() { 
     $("#tree").jstree("create", $("#child1\\.id"), "inside", 
       { "data" : "child2", "attr" : { "id" : "child2.id" }, 
        "children" : [ { "data" : "child3", "attr" : { "id" : "child3.id" }, "children": [ ] } ] }, 
          function() { alert("added"); }, true); 
    }); 
}); 
</script> 
</head> 

<body> 

<div id="tree" name="tree"></div> 

<input type="button" id="add" value="add" /> 
</body> 
</html> 
+0

Forse questo non è possibile? Presumemmo che la funzione di creazione fosse implementata per recitare sui bambini, ma forse no ... Andando a dare un'occhiata alla fonte ... – user419766

+0

ho avuto lo stesso problema come hai potuto risolverlo? –

risposta

0

Per quanto posso vedere dalla fonte, la funzione "crea" non supporta la creazione di albero a più livelli contemporaneamente. Il metodo che viene chiamato non utilizza e controlla l'attributo children sui dati passati.

0

È necessario farlo da soli, qualcosa del genere:

   var recursivelyCreate = function (node, parentNodeId) { 
        tree.jstree("create", $("#"+parentNodeId), "inside", node, function() {}, true); 
        if(node.children){ 
         $.each(node.children, function(i, child){ 
          recursivelyCreate(child, node.attr.id); 
         }); 
        } 
       }; 
       recursivelyCreate(rootNodeYouWantToInsert,nodeParentId); 
1

Prima di tutto, questo non è JSON valido con l'ultimo comma dentro l'ultima staffa. Prendere che fuori:

[ 
    { 
     "data" : "parent", 
     "attr" : { 
      "id" : "root.id" 
     }, 
     "children" : [ 
      { 
       "data" : "child1", 
       "attr" : { 
        "id" : "child1.id" 
       }, 
       "children" : [ ] 
      } 
     ] 
    } 
] 

Inoltre, a partire dalla versione 3.0 o forse prima di poter semplicemente inserire un nuovo nodo con JSON. La ricorsione non è più necessaria.

Ho creato json in questo modo, che crea una cartella denominata reddito e inserisce molti bambini di testo al di sotto ma anche quelli che potrebbero essere cartelle come il genitore con più contenuti. Vedere la mia funzione qui sotto che inserisce questa cartella nella genitore con tutti i suoi figli:

{ 
    "text" : "Income", 
     "id" : "_folder_income", 
     "state" : { 
      "opened" : true 
     }, 
     "children" : [ 
     { 
      "text" : "$125,000 - $150,000", 
      "state" : { 
       "selected" : true 
      }, 
      "icon" : "jstree-file", 
      "id" : "6017897162332" 
     }, 
     { 
      "text" : "$150,000 - $250,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6017897374132" 
     }, 
     { 
      "text" : "$250,000 - $350,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6017897397132" 
     }, 
     { 
      "text" : "$350,000 - $500,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6017897416732" 
     }, 
     { 
      "text" : "Over $500,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6017897439932" 
     }, 
     { 
      "text" : "$30,000 - $40,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6018510070532" 
     }, 
     { 
      "text" : "$100,000 - $125,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6018510083132" 
     }, 
     { 
      "text" : "$40,000 - $50,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6018510087532" 
     }, 
     { 
      "text" : "$75,000 - $100,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6018510100332" 
     }, 
     { 
      "text" : "$50,000 - $75,000", 
      "state" : { 
       "selected" : false 
      }, 
      "icon" : "jstree-file", 
      "id" : "6018510122932" 
     } 
    ] 
} 

Questa stessa JSON potrebbe anche essere usato per riempire una cartella principale su istanza albero:

/** 
* inserts a new node (json object returned from url) into an existing node (parentNodeId), for the div ud in jsTreeName which is 
* an instanced jstree. 
* @param string jsTreeName {name of an instanced tree} 
* @param string url {returns json} 
* @param string parentNodeId {string of the parent node id} 
*/ 
function insertUrlIntoNode(jsTreeName, url, parentNodeId) { 
    var nodeTree = getSynchronousJson(url); 
    var tree = $('#'+jsTreeName).jstree(true); 
    tree.deselect_all(); 
    var sel = tree.create_node(parentNodeId, nodeTree); 
    //tree.deselect_all(); 
    //tree.select_node(sel); //optionally you could select the new node after insersion 
} 
Problemi correlati