多级表(如果单击，则在另一个表中) [英] Multi-level tables (inside another if clicked)

问题描述

假设我是一家拥有多家商店的大公司的老板.根据我在公司中担任的角色(在组织中的位置)，我将拥有不同的数据访问权限.将会有不同的模块，对于这个特定的问题，有一个可以访问的用户可以完成日常成本和销售.(这是否合法……不管，这只是一个例子.)

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.)

用户因此通过 REST API 从后端(Java 应用程序)获取所有数据，以及用户有权访问的所有商店的所有数据.然后，用户应该能够通过不同的过滤器组合来过滤数据.与我的问题最相关的是按天计算的日期间隔.

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.

1. 我首先创建了在手风琴组级别上存储的手风琴，然后在手风琴主体内的表中创建了下一级数据.(目前只有硬编码数据.)这里的问题是相应的标题是一个字符串，经过一些讨论，我们认为这不是一个好的解决方案，因为标题将由表中的部分数据组成单独的列.因此，在折叠时很难列化"标题数据以水平匹配不同的商店"(在手风琴标题之间)(当然，当一个或多个手风琴展开时会更加混乱).
2. 我用 table 和 ng-repeat 替换了手风琴.已成功地使用来自比喻 API 的数据和 JSON 数据填充第一个表级别，并使 i18next 为标题工作.

JSON

{ 
"metadata":{
    "storesInTotal":"25",
    "storesInRepresentation":"2"
},
"storedata":[
    { 
        "store" : {
            "storeId" : "1000",
            "storeName" : "Store 1",
            "storePhone" : "[phone]",
            "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" : "[phone]",
            "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 来显示与现有数据类似但内联的所有数据.

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.

所以我已经获得了从点击行获取 $index 和特定数据的功能.我还需要什么样的指令或任何其他解决方案来获取单击行时的数据"并显示在单击行下方的表格中?

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?

我不希望它一直在 DOM 中，因为每个商店和许多商店可能有很多 dayData.(稍后会使用分页，但即便如此，也不会一直在 DOM 中使用.)这意味着我必须能够在单击一行时进行添加，以及在单击之前单击的行中的相同或另一个 REMOVE 时进行添加.

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.

新更新的 JSFiddle.

推荐答案

要求不是用所有二级表填充 DOM，我想出了一个解决方案.

The requirement was to not fill the DOM with all second level tables and I came up with a solution for it.

首先，我尝试创建一个自定义指令，并让它在正确的位置(在单击的行下方)插入一行，并创建了一个带有标题的二级表，但无法使用 ng-repeat 填充行.

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.

因为我找不到一个完全有效的解决方案，所以我回到我已经创建的，使用 ng-show 并寻找类似的解决方案......并且存在一个解决方案.Angular 没有使用 ng-show/ng-hide，而是有一个名为 ng-switch 的指令.

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.

一级

<tbody data-ng-repeat="storedata in storeDataModel.storedata" 
       data-ng-switch on="dayDataCollapse[$index]">

...然后在第二级，即第二个 tr

...and then in the second level, i.e. the second tr

<tr data-ng-switch-when="true">

，其中你有第二级 ng-repeat.

, in which you have the second level ng-repeat.

这是一个新的 JSFiddle.

Here's a new JSFiddle.

检查元素，您会看到每个折叠"的 2 级表格都有一个注释占位符.

Inspect elements, and you will see that there is a comment placeholder for each "collapsed" level 2 table.

根据还扩展/折叠级别 3 的请求，这里有一个新的 JSFIDDLE.

Upon request of also expanding/collapsing level 3, here's a new JSFIDDLE.

注意！ - 此解决方案始终包含 DOM 中的所有信息，即与早期解决方案不同，后者仅添加了应请求添加信息的位置的符号.

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.

(不过我不能相信这个，因为我的朋友 Axel 分叉了我的，然后添加了功能.)

(I can't take credit of this one though, since my friend Axel forked mine and then added the functionality.)

这篇关于多级表(如果单击，则在另一个表中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！