jstree - добавление дочерних узлов, которые сами содержат детей - PullRequest
Новая
       7

jstree - добавление дочерних узлов, которые сами содержат детей

6 голосов
/ 16 августа 2010

У меня есть некоторый код, в котором мне нужна возможность добавлять дочерние узлы в jstree, которые сами содержат детей.Приведенный ниже код правильно добавляет узел 'child2' к 'child1', но игнорирует данные child3.Любая помощь высоко ценится.Код следует: 

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

Ответы [ 3 ]

1 голос
/ 26 февраля 2015

Во-первых, это недопустимый json с последней запятой внутри последней скобки. Сними это: 

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

Кроме того, начиная с версии 3.0 или, возможно, раньше вы можете просто вставить новый узел с помощью json. Рекурсия больше не нужна.

Я создал json примерно так, который создает папку с именем дохода и помещает под нее много дочерних текстовых файлов, но также они могут быть папками, похожими на родительские, с большим содержанием. Посмотрите мою функцию ниже, которая вставляет эту папку в родительский файл со всеми его дочерними элементами: 

{
    "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
}
0 голосов
/ 11 июля 2013

Вы должны сделать это сами, что-то вроде этого: 

                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);
0 голосов
/ 12 сентября 2011

Насколько я вижу из источника, функция "создать" не поддерживает создание многоуровневого дерева сразу.Вызываемый метод не использует и проверяет атрибут children в переданных данных.

...