[英]Building a tree structure in 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语句,但是我需要一种更短,更有效的方法。
您可以使用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/的数据格式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.