加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 08:19:41 所属栏目:安全 来源:网络整理
导读:脚本 说我是拥有很多商店的大公司的老板。根据我在公司内部的角色(组织中的位置),我将具有不同的数据访问权限。将有不同的模块,对于这个具体问题,有一个用户可以通过日常的成本和销售。 (如果这是合法的…不在乎,这只是一个例子。) 因此,用户可以从Back
脚本

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

因此,用户可以从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分叉了我的,然后添加了功能。)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读