在angularjs中构建树型结构

我想在angularjs中动态构建一棵树，从数据库中如下检索结构。在angularjs中构建树型结构

[{ 
    "TreeName":"String content", 
    "Level":0, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":0, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":1, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":2, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":2, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":1, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":2, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":3, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":1, 
}]

如果为0电平，那么它的主节点和1电平变为父节点和第2级变为父母的子节点和3级变为儿童的子节点，等等。

我已经尝试了很多例子，并没有工作，唯一的事情是我认为要做很多if语句，但我需要更短，更有效的方式。

来源

2016-09-23 Desolation

你可以在格式尝试使用'jstree' https://libraries.io/bower/jstree –

你可以使用jsTree.jsTree是jquery插件，它提供了交互式树。它是完全免费的，开放源代码并在MIT许可下分发。 jsTree很容易扩展，可编程和可配置，它支持HTML & JSON数据源和AJAX加载。你可以找到更多的细节上https://www.jstree.com/

下面是代码

$('#jstree_demo').jstree({ 
    "core" : { 
    "animation" : 0, 
    "check_callback" : true, 
    "themes" : { "stripes" : true }, 
    'data' : { 
     'url' : function (node) { 
     return node.id === '#' ? 
      'ajax_demo_roots.json' : 'ajax_demo_children.json'; 
     }, 
     'data' : function (node) { 
     return { 'id' : node.id }; 
     } 
    } 
    }, 
    "types" : { 
    "#" : { 
     "max_children" : 1, 
     "max_depth" : 4, 
     "valid_children" : ["root"] 
    }, 
    "root" : { 
     "icon" : "/static/3.3.2/assets/images/tree_icon.png", 
     "valid_children" : ["default"] 
    }, 
    "default" : { 
     "valid_children" : ["default","file"] 
    }, 
    "file" : { 
     "icon" : "glyphicon glyphicon-file", 
     "valid_children" : [] 
    } 
    }, 
    "plugins" : [ 
    "contextmenu", "dnd", "search", 
    "state", "types", "wholerow" 
    ] 
});

您也可以找到关于https://www.jstree.com/demo/

这里工作演示是数据的使用jstree https://www.jstree.com/docs/json/

来源

2016-09-23 05:45:59

在angularjs中构建树型结构

回答

相关问题