多级表（在另一个如果点击） [英] Multi-level tables (inside another if clicked)
问题描述
场景
可以说，我是一个大公司，有很多商店的老板。根据什么样的作用（在本组织）我在公司内部，我将有不同的数据访问。会有不同的模块，并为这个具体的问题有一个在这里拥有访问权限的用户可以通过每天的成本和销售。
（如果那是合法的或不...不关心，这只是一个例子。）
用户从而打通从后端（Java应用程序）REST API与所有店铺的用户可以访问所有数据的所有数据。然后，用户应能够通过不同的滤波器的组合来过滤数据。最相关的我的问题是由天日期间隔。
有将显示在不同层次，不同的数据一些图表下面会有我想要多层次的表的表区域，因此，我的问题。
完成至今
- 我首先创建有商店手风琴组级，然后在一个表中的数据的一个新的水平，手风琴，体内手风琴。 （目前只有硬codeD数据。）这里的问题是，一个按照标题是一个字符串，经过一番讨论，我们觉得这是不是一个很好的解决方案，因为标题会在表中包含的部分数据的本来单独的列。折叠时，将因此会难以columnize的标题数据在水平方向匹配不同的存储（手风琴标题间）（当然更加杂乱的，当一个或多个手风琴被展开）。
- 我替换表和NG-重复的手风琴。已成功地填充了从JSON数据形象化的API以及得到i18next致力于为标题两个数据表头的水平。
JSON
{
元数据：{
storesInTotal：25
storesInRe presentation：2
}，
storedata：[
{
存储：{
STOREID：1000，
STORENAME：存储1
storePhone：+46 31 1234567，
storeAddress：有的街道1
storeCity：哥德堡
}，
数据：{
的startDate：2013-07-01，
结束日期：2013-07-02，
costTotal：100000，
salesTotal：150000，
revenueTotal：50000，
averageEmployees：3.5，
averageEmployeesHours：26.5，
dayData：[
{
日期：2013-07-01，
成本：25000，
销售：15000，
收入：4000，
员工：3
employeesHoursSum：24
}，
{
日期：2013-07-02，
成本：25000，
销售：16000，
收入：5000，
员工：4，
employeesHoursSum：29
}
]
}
}，
{
存储：{
STOREID：2000
STORENAME：商店2，
storePhone：+46 8 9876543，
storeAddress：大马路100
storeCity：斯德哥尔摩
}，
数据：{
的startDate：2013-07-01，
结束日期：2013-07-02，
costTotal：170000，
salesTotal：250000，
revenueTotal：80000，
averageEmployees：4.5，
averageEmployeesHours：35
dayData：[
{
日期：2013-07-01，
成本：85000，
销售：120000，
收入：35000，
员工：5
employeesHoursSum：38
}，
{
日期：2013-07-02，
成本：85000，
销售：130000，
收入：45000，
员工：4，
employeesHoursSum：32
}
]
}
}
]
_链接：{
自：{
HREF：/ storedata / / 2013-07-01 / 2013-07-02之间
}
}
}
视觉的例子 - 的jsfiddle
检查值在结果框，左上角。试着点击例如一行存储ID 2000，然后3000，然后再3000看值的变化情况。
目前我的jsfiddle 更新
通缉的功能
在单击某一行（如图中的jsfiddle），我希望有一个指令或触发的东西，在日期间隔去为商店获取基础数据（dayData）点击和显示所有天。即扩大该行，包括点击排，也应该使用NG-重复获取所有数据显示类似于现有的一个，但行内下一个新表。
问题
所以，我已经得到了功能，您可以通过点击行中$指数，也是具体的数据。
什么样的指令或任何其他解决方案，我需要另外获得数据时行点击和$ P $的点击下排在表psented？
我不希望它在DOM中所有的时间，因为有可能是每家商店和许多商店很多dayData。 （稍后会使用分页，但即便如此，不是在DOM所有的时间。）
这意味着，我必须能够点击一个行时，然后点击相同或从previously单击另一个拆卸时添加。
修改
的要求是不是对所有的第二级表填写DOM和我想出了它的解决方案。
首先，我尝试创建一个自定义的指令，我得到它插入（点击的行下）在正确的地方一行，并创建了头第二级表，但无法得到它与使用NG-重复行填充。
因为我无法找到工作完全我回到了我已经创造了什么，用NG-节目，并寻求解决方案喜欢它...并存在一个解决方案。
而是采用NG-显示/ NG隐藏的，角有一个名为NG-开关指令。
在一级
＆LT; TBODY数据-NG-重复=storedata在storeDataModel.storedata
关于=dayDataCollapse [$指数]＆GT数据-NG-开关;
...然后在第二级，即第二TR
＆LT; TR数据-NG-开关时=真＆GT;
，其中你有第二级NG-重复。
下面是一个新的 的jsfiddle
检查元素，你会看到有每个坍塌2级表注释占位符。
更新（2014年9月29日）
一旦也在不断扩大/折叠3级的要求，这里有一个新的 的jsfiddle
！注意 - 该解决方案可以在任何时候DOM中的所有信息，即不作为较早解决方案，它只是添加了对应根据要求添加的信息的符号。
（我不能把这个信用不过，因为我的朋友阿克塞尔分叉矿，然后加入的功能。）
Scenario
Lets say I am owner of a big company that has many stores. Depending on what role (place in the organization) I have within the company, I will have different access to data. There will be different modules and for this specific question there is one where users that have access can go through daily cost and sales. (If that's legal or not...don't care, it's just for an example.)
The user thereby get all data through REST API from BackEnd (Java application) with all data for all stores the user has access to. The user should then be able to filter the data, by different filter combinations. Most relevant for my question is the date interval by days.
There will be some charts showing data on different levels and below there will be a table area where I want the multi-level tables, hence my question.
Done so far
- I first created accordions that have stores on accordion-group level and then next level of data in a table, within the accordion-body. (Only hard coded data at the moment.) The problem here was that an according heading is a string and after some discussion we felt that this was not a good solution since the heading would consist of parts of data that in a table would have been separate columns. It would therefore be difficult to "columnize" the heading data to match horizontally the different "stores" (between the accordion headings) when collapsed (and of course even more messy when one or more accordion are expanded).
- I replaced the accordions with table and ng-repeat. Have successfully populated the first table level with both data from the figurative API with JSON data as well as got i18next working for the headings.
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"
}
}
}
Visual example - JSFiddle
Check the values in the result frame, top left corner. Try clicking for example row with Store ID 2000, then with 3000 and then 3000 again to see how the values change. Current update of my JSFiddle
Wanted functionality
When a row is clicked (as shown in the JSFiddle), I want a directive or something triggered, to go and fetch underlying data (dayData) for the store clicked and show all days in the date interval. I.e expanding the row, and including a new table under the clicked row, which also should use ng-repeat to get all data displayed similar to the existing one, but inline.
Question
So I have already got the functionality to get the $index and also the specific data from the clicked row. What kind of directive or any other solution do I need additionally to get the "data when row clicked" and presented in a table under the clicked row?
I don't want it in the DOM all the time, since there might be many dayData for each store and many stores. (And will use pagination later, but even so, not in the DOM all the time.) This means that I have to be able to ADD when clicking a row, and when clicking the same or another REMOVE from the previously clicked.
EDIT
The requirement was to not fill the DOM with all second level tables and I came up with a solution for it.
First I tried creating a custom directive and I got it to insert a row at the right place (beneath the clicked row) and created a second level table with headers but could not get it to populate with rows using ng-repeat.
Since I could not find a solution that worked fully I went back to what I already had created, with ng-show and sought a solution like it...and there exist one. Instead of using ng-show/ng-hide, Angular has a directive called ng-switch.
In level one
<tbody data-ng-repeat="storedata in storeDataModel.storedata"
data-ng-switch on="dayDataCollapse[$index]">
...and then in the second level, i.e. the second tr
<tr data-ng-switch-when="true">
, in which you have the second level ng-repeat.
Here's a new JSFiddle.
Inspect elements, and you will see that there is a comment placeholder for each "collapsed" level 2 table.
UPDATE (2014-09-29)
Upon request of also expanding/collapsing level 3, here's a new JSFIDDLE.
NOTE! - This solution have all information in the DOM at all times, i.e. not as the earlier solution, which only added a notation for where the information should be added upon request.
(I can't take credit of this one though, since my friend Axel forked mine and then added the functionality.)
这篇关于多级表（在另一个如果点击）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
