2010-08-16 114 views
6

我有一些代码需要将子节点添加到本身包含子节点的jstree中。下面的代码将'child2'节点正确添加到'child1',但忽略了child3数据。任何帮助非常感谢。代码如下:jstree - 添加自己包含子节点的子节点

<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

也许这并不可能?我想presuemd创建函数实施,以缓解儿童,但也许不是......去看看来源... – user419766 2010-08-16 20:01:17

+0

我有同样的问题你怎么能解决它? – 2013-08-12 22:01:47

回答

0

据我可以看到,从源,“创建”功能不支持创建多级树一次。被调用的方法不使用并检查传入数据上的children属性。

0

你需要自己做,这样的事情:

   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

首先,这不是与最后括号内的最后一个逗号有效的JSON。取而代之:

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

另外,从版本3.0开始,或者可能之前,你可以简单地插入一个新的节点与JSON。递归不再需要。

我创建了这样的json,它创建了一个名为income的文件夹,并将许多文本子文件放在它下面,但也可能是与具有更多内容的父文件夹类似的文件夹。见我的函数低于这个文件夹插入到父与它所有的孩子:

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

这同样JSON也可用于填充树实例的父文件夹:

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