2010-08-16 150 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 
}