4

ビュー ツリーの折りたたみと展開モード: ツリー ビューの折りたたみと展開モード

使用されるマークアップは HTML テーブルです。

ng-repeat の使用は難しくなっています。

各行のデータは次のとおりです

{  
    "id": 1,
    "name": "Groceries",
    "price": "0",
    "total": "20",
    "parentFlag": "true",
    "parentId": "",
    childItems: [{},{}]
}

ulとliタグを使用すると、ng-include を使用してこれを実現できます。

ただし、既存のアプリ マークアップではテーブルが使用されます。マークアップを使用するように変更することを考え始めておりul、liそれdivが「唯一の」方法です。ここで何か不足していますか？ポインタ/アプローチはありますか？

4

2 に答える 2

1

私は数ヶ月前に同じ問題を抱えていて、それを解決しました。Angular.jsとbootstrapを使ったツリービューテーブルです。コードとフローを参照して、その仕組みを理解してください。説明と実際の例を含むドキュメントがあります。

GitHub リンク

JSFiddle での作業例

使い方？

このテーブルを実装するために単純な概念を使用しました。複雑なツリー データ構造を単純な 1 次元配列に変更し、Angular の ng-repeat を使用してこの配列を繰り返します。この配列の各ノードには、親 ID とレベル情報が含まれています。これは、各ノードを適切な場所に表示し、適切にインデントするために使用されます。例えば。

var treeDS = [ { name : aptitude, id : 123, childNodes : [ { name :     time and work, id : 125 }, { name : problem on trains, id : 127 } ] } ]

このツリー データ構造を次の 1 次元配列に変換します。

var oneDArray = [ { name : aptitude, id : 123, level : 0, indentClass : "indent-0", parentId : -1 }, { name : aptitude, id : 123, level : 0, indentClass : "indent-1" parentId : 123 }, { name : aptitude, id : 123, level : 0, indentClass : "indent-1", parentId : 123 } ]

この oneDArray には、適切な親子関係とインデントを持つテーブル内のツリー データ構造を表示するためのすべての情報が含まれています。

level : ノードの深さを表示します indentClass : ノードの深さに従って行をインデントします parentId : どのノードをどのノードの下に表示する必要があるかを示すのに役立ちます。

于 2016-11-26T11:34:04.730 に答える