angularjs – 多级表(如果单击了另一个)
脚本
说我是拥有很多商店的大公司的老板。根据我在公司内部的角色(组织中的位置),我将具有不同的数据访问权限。将有不同的模块,对于这个具体问题,有一个用户可以通过日常的成本和销售。 因此,用户可以从BackEnd(Java应用程序)通过REST API获取所有数据,并具有用户可以访问的所有存储的所有数据。然后,用户可以通过不同的过滤器组合来过滤数据。与我的问题最相关的是日期间隔。 将有一些图表显示不同级别的数据,下面将会有一个表区域,我想要多级表,因此我的问题。 到目前为止 >我首先在手风琴组内创建了手风琴组的手风琴,然后在手风琴组中的表中创建了下一级数据。 (目前只有硬编码的数据。)这里的问题是,一个标题是一个字符串,经过一些讨论,我们认为这不是一个很好的解决方案,因为标题将包含在表中的数据部分单独列。因此,当折叠数据(当一个或多个手风琴被扩展时,当然更混乱)时,难以“标题化”标准数据以水平地匹配不同的“商店”(手风琴标题之间)。 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,以查看值是如何变化的。 想要的功能 当单击一行(如JSFiddle所示)时,我想要一个指令或触发的东西,以便为所点击的商店获取基础数据(dayData),并在日期间隔中显示所有日期。 I.e扩展行,并在点击的行下面添加一个新表,也应该使用ng-repeat来获取与现有数据类似的所有数据,但是内联。 题 所以我已经获得了$ index的功能,还有从点击行的特定数据。 我不想在DOM中一直使用它,因为每个商店和许多商店可能会有很多dayData。 (而且会在以后使用分页,但即使如此,也不是在DOM中。) 编辑 New updated JSFiddle。
要求是不用DOM填充所有的二级表,我想出了一个解决方案。
首先,我尝试创建一个自定义指令,并将其放在正确的位置(点击的行下方),并创建了一个带标题的第二级表,但无法使用ng-repeat填充行。 由于我找不到一个全面工作的解决方案,我回到了我已经创建的一个解决方案,并且正在寻找一个解决方案,而且存在一个。 在一级 <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分叉了我的,然后添加了功能。) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |