angularjs – 多级表(如果单击了另一个)

前端之家收集整理的这篇文章主要介绍了angularjs – 多级表(如果单击了另一个)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@ 脚本

说我是拥有很多商店的大公司的老板。根据我在公司内部的角色(组织中的位置),我将具有不同的数据访问权限。将有不同的模块,对于这个具体问题,有一个用户可以通过日常的成本和销售。
(如果这是合法的…不在乎,这只是一个例子。)

因此,用户可以从BackEnd(Java应用程序)通过REST API获取所有数据,并具有用户可以访问的所有存储的所有数据。然后,用户可以通过不同的过滤器组合来过滤数据。与我的问题最相关的是日期间隔。

将有一些图表显示不同级别的数据,下面将会有一个表区域,我想要多级表,因此我的问题。

到目前为止

>我首先在手风琴组内创建了手风琴组的手风琴,然后在手风琴组中的表中创建了下一级数据。 (目前只有硬编码的数据。)这里的问题是,一个标题是一个字符串,经过一些讨论,我们认为这不是一个很好的解决方案,因为标题将包含在表中的数据部分单独列。因此,当折叠数据(当一个或多个手风琴被扩展时,当然更混乱)时,难以“标题化”标准数据以水平地匹配不同的“商店”(手风琴标题之间)。
>我用表和ng重复替换了手风琴。已经使用来自具体数据的比喻API的数据成功填充了第一个表级别,并获得了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","sales" : "16000","revenue" : "5000","employees" : "4","employeesHouRSSum" : "29"
                }
            ]
        }
    },{
        "store" : {
            "storeId" : "2000","storeName" : "Store 2","storePhone" : "+46 8 9876543","storeAddress": "Big street 100","storeCity" : "Stockholm"
        },"costTotal" : "170000","salesTotal" : "250000","revenueTotal" : "80000","averageEmployees" : "4.5","averageEmployeesHours" : "35","cost" : "85000","sales" : "120000","revenue" : "35000","employees" : "5","employeesHouRSSum" : "38"
                },"sales" : "130000","revenue" : "45000","employeesHouRSSum" : "32"
                }
            ]
        }
    }
],"_links":{
    "self":{
        "href":"/storedata/between/2013-07-01/2013-07-02"
    }
}
}

视觉示例 – JSFiddle

检查结果框架中的左上角的值。尝试用Store ID 2000单击例如行,然后再次使用3000和然后再查看3000,以查看值是如何变化的。
Current update of my JSFiddle

想要的功能

当单击一行(如JSFiddle所示)时,我想要一个指令或触发的东西,以便为所点击的商店获取基础数据(dayData),并在日期间隔中显示所有日期。 I.e扩展行,并在点击的行下面添加一个新表,也应该使用ng-repeat来获取与现有数据类似的所有数据,但是内联。

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

我不想在DOM中一直使用它,因为每个商店和许多商店可能会有很多dayData。 (而且会在以后使用分页,但即使如此,也不是在DOM中。)
这意味着我必须能够在单击一行时单击添加,并且从以前单击中单击相同或另一个REMOVE时。

编辑

New updated JSFiddle

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

首先,我尝试创建一个自定义指令,并将其放在正确的位置(点击的行下方),并创建了一个带标题的第二级表,但无法使用ng-repeat填充行。

由于我找不到一个全面工作的解决方案,我回到了我已经创建的一个解决方案,并且正在寻找一个解决方案,而且存在一个。
Angular不使用ng-show / ng-hide,而是使用一个指令ng-switch。

在一级

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

…然后在第二级,即第二级

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

,你有二级ng重复。

这是一个新的JSFiddle

检查元素,您将看到每个“折叠”级别2表有一个注释占位符。

更新(2014-09-29)

根据要求也扩大/崩溃3级,这是一个新的JSFIDDLE

注意! – 此解决方案始终包含DOM中的所有信息,即不是早期的解决方案,只能在请求时添加信息的位置添加符号。

(我不能信任这个,虽然,因为我的朋友Axel分叉了我的,然后添加功能。)

原文链接:https://www.f2er.com/angularjs/144859.html

猜你在找的Angularjs相关文章