jstree - ajouter des nœuds enfants qui eux-mêmes contiennent des enfants

J'ai du code dans lequel j'ai besoin de pouvoir ajouter des nœuds enfants à un jstree qui contient lui-même des enfants. Le code ci-dessous ajoute correctement un noeud 'child2' à 'child1' mais ignore les données child3. Toute aide très appréciée. Code suit:jstree - ajouter des nœuds enfants qui eux-mêmes contiennent des enfants

<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>

Source

2010-08-16 user419766

Peut-être que ce n'est pas possible? Je dirais que la fonction de création a été implémentée pour se recurder sur les enfants, mais peut-être pas ... Je vais jeter un oeil à la source ... – user419766

J'ai eu le même problème comment pourriez-vous le résoudre? –

Pour autant que je peux voir de la source, « créer » la fonction ne prend pas en charge la création d'arbres à plusieurs niveaux à la fois. La méthode appelée n'est pas utilisée et vérifie l'attribut children sur les données transmises.

Source

2011-09-12 09:46:20 WTK

Vous devez le faire vous-même, quelque chose comme ça:

   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);

Source

2013-07-11 12:46:14 Quentin

Tout d'abord, ce n'est pas JSON valide avec la virgule dans la dernière tranche. Prenez cette off:

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

En outre, à partir de la version 3.0 ou peut-être avant de pouvoir simplement il suffit d'insérer un nouveau noeud avec JSON. La récursivité n'est plus nécessaire.

J'ai créé json comme ça, ce qui crée un dossier appelé revenu et met beaucoup d'enfants de texte en dessous, mais aussi ceux qui pourraient être des dossiers comme le parent avec plus de contenu. Voir ma fonction ci-dessous qui insère ce dossier dans le parent avec toutes ses enfants:

{ 
    "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" 
     } 
    ] 
}

Cette même JSON pourrait également être utilisé pour remplir un dossier parent sur l'instance d'arbre:

/** 
* 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 
}

Source

2015-02-26 04:12:10

jstree - ajouter des nœuds enfants qui eux-mêmes contiennent des enfants

Répondre

Questions connexes