angularjsのツリー構造を構築する

Question

私はangularjsで動的にツリーを構築したいのですが、その構造はデータベースから次のように取得されます。レベル0は、そのメインノード及びレベル1は、親ノードとレベルとなる場合

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

2は、親の子ノードとレベル3などそのチャイルズ子ノードとになっていることになります。

私は多くの例を試していますが、唯一のことはif文をたくさん使うことだと思っていましたが、私はより短く効率的な方法が必要です。

Answer 1

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/

そしてここに取り組んでデモを見つけることができますが、データの形式は、https://www.jstree.com/docs/json/