シナリオ
私が多くの店舗を持つ大企業のオーナーだとしましょう。社内での役割 (組織内の場所) に応じて、データへのアクセス権が異なります。さまざまなモジュールがあり、この特定の質問には、アクセス権を持つユーザーが毎日のコストと売上を確認できるモジュールがあります。(それが合法であるかどうか...気にしないでください。これは単なる例です。)
これにより、ユーザーはバックエンド (Java アプリケーション) から REST API を介してすべてのデータを取得し、ユーザーがアクセスできるすべてのストアのすべてのデータを取得します。ユーザーは、さまざまなフィルターの組み合わせによって、データをフィルター処理できる必要があります。私の質問に最も関連するのは、日ごとの日付間隔です。
さまざまなレベルのデータを示すグラフがいくつかあり、その下にはマルチレベルのテーブルが必要なテーブル領域があるため、私の質問です。
ここまで完了
- 最初に、アコーディオン グループ レベルのストアを持つアコーディオンを作成し、次に、アコーディオン本体内のテーブル内の次のレベルのデータを作成しました。(現時点ではハードコードされたデータのみです。) ここでの問題は、対応する見出しが文字列であることであり、いくつかの議論の後、見出しはテーブル内のデータの一部で構成されるため、これは適切な解決策ではないと感じました。別々の列。したがって、折りたたまれたときに (アコーディオンの見出し間で) さまざまな「ストア」に水平方向に一致するように見出しデータを「列化」することは困難です (もちろん、1 つまたは複数のアコーディオンが展開されている場合はさらに面倒です)。
- アコーディオンをテーブルと ng-repeat に置き換えました。比喩的な API からのデータと JSON データの両方を最初のテーブル レベルに正常に入力し、見出しに対して i18next を機能させました。
JSON
{
"metadata":{
"storesInTotal":"25",
"storesInRepresentation":"2"
},
"storedata":[
{
"store" : {
"storeId" : "1000",
"storeName" : "Store 1",
"storePhone" : "+46 31 1234567",
"storeAddress": "Some street 1",
"storeCity" : "Gothenburg"
},
"data" : {
"startDate" : "2013-07-01",
"endDate" : "2013-07-02",
"costTotal" : "100000",
"salesTotal" : "150000",
"revenueTotal" : "50000",
"averageEmployees" : "3.5",
"averageEmployeesHours" : "26.5",
"dayData" : [
{
"date" : "2013-07-01",
"cost" : "25000",
"sales" : "15000",
"revenue" : "4000",
"employees" : "3",
"employeesHoursSum" : "24"
},
{
"date" : "2013-07-02",
"cost" : "25000",
"sales" : "16000",
"revenue" : "5000",
"employees" : "4",
"employeesHoursSum" : "29"
}
]
}
},
{
"store" : {
"storeId" : "2000",
"storeName" : "Store 2",
"storePhone" : "+46 8 9876543",
"storeAddress": "Big street 100",
"storeCity" : "Stockholm"
},
"data" : {
"startDate" : "2013-07-01",
"endDate" : "2013-07-02",
"costTotal" : "170000",
"salesTotal" : "250000",
"revenueTotal" : "80000",
"averageEmployees" : "4.5",
"averageEmployeesHours" : "35",
"dayData" : [
{
"date" : "2013-07-01",
"cost" : "85000",
"sales" : "120000",
"revenue" : "35000",
"employees" : "5",
"employeesHoursSum" : "38"
},
{
"date" : "2013-07-02",
"cost" : "85000",
"sales" : "130000",
"revenue" : "45000",
"employees" : "4",
"employeesHoursSum" : "32"
}
]
}
}
],
"_links":{
"self":{
"href":"/storedata/between/2013-07-01/2013-07-02"
}
}
}
視覚的な例 - JSFiddle
結果フレームの左上隅の値を確認します。たとえば、ストア ID 2000、3000、3000 の行をクリックして、値がどのように変化するかを確認してください。 私のJSFiddleの現在の更新
欲しかった機能
行がクリックされると (JSFiddle に示されているように)、ディレクティブまたは何かがトリガーされて、クリックされたストアの基礎となるデータ (dayData) をフェッチし、日付間隔のすべての日を表示する必要があります。つまり、行を展開し、クリックした行の下に新しいテーブルを含めます。これも ng-repeat を使用して、既存のものと同様に表示されるすべてのデータをインラインで取得する必要があります。
質問
したがって、クリックした行から $index と特定のデータを取得する機能を既に持っています。「行がクリックされたときのデータ」を取得し、クリックされた行の下の表に表示するには、どのようなディレクティブまたはその他のソリューションが必要ですか?
各ストアと多くのストアに多くの dayData が存在する可能性があるため、常に DOM に入れたいわけではありません。（そして、後でページネーションを使用しますが、それでもDOMでは常にではありません。）これは、行をクリックしたとき、および同じまたは別のREMOVEをクリックしたときに、以前にクリックしたものから追加できる必要があることを意味します。