Question

我正在处理角度5，并且需要创建一个具有向下钻取功能的表格，其中可以有n个父子组件，当您单击父级时，将显示所有子项（向下钻取）。请在下面找到示例数据。

"[{"Id":1,
"ClientName":null,
"ProductName":"Product1",
"CatagoryName":null,
"Jsondata":"[{\"TKey\":\"hubname\",\"TValue\":\"XXXX\"},{\"TKey\":\"IPAddress\",\"TValue\":\"YYYY\"},{\"TKey\":\"Origin\",\"TValue\":\"ZZZZ\"},{\"TKey\":\"Domain\",\"TValue\":\"AAAA\"},{\"TKey\":\"Health\",\"TValue\":\"Running\"}]",
"ParentName":"",
"Name":"XXXX",
"EntityType":null,
"CreatedTime":"2018-02-09T13:20:23.253",
"child":[  
   {  
      "Id":2,
      "ClientName":null,
      "ProductName":"Prod1",
      "CatagoryName":null,
      "Jsondata":"[{\"TKey\":\"AgentName\",\"TValue\":\"BBBB\"},{\"TKey\":\"AgentIP\",\"TValue\":\"YYYY\"},{\"TKey\":\"Agent_Address\",\"TValue\":\"ZZZZ\"},{\"TKey\":\"Response\",\"TValue\":null},{\"TKey\":\"Status\",\"TValue\":\"Running\"}]",
      "ParentName":"XXXX",
      "Name":"BBBB",
      "EntityType":null,
      "CreatedTime":"2018-02-09T13:20:23.257",
      "subChild":[  
         {  
            "Id":2,
            "ClientName":null,
            "ProductName":"CAUIM",
            "CatagoryName":null,
            "Jsondata":"[{\"TKey\":\"AgentName\",\"TValue\":\"CCCC\"},{\"TKey\":\"AgentIP\",\"TValue\":\"DDDD\"},{\"TKey\":\"Agent_Address\",\"TValue\":\"FFFF\"},{\"TKey\":\"Response\",\"TValue\":null},{\"TKey\":\"Status\",\"TValue\":\"Running\"}]",
            "ParentName":"BBBB",
            "Name":"CCCC",
            "EntityType":null,
            "CreatedTime":"2018-02-09T13:20:23.257"
         }
      ]
   }
]
}
]"

Answer 1

目前还不清楚你想要达到的目标，但我会尽我所能。让我们说你点击一个表格行，你可以像这样使用弹出窗口：

$mdDialog.show({
               template: '<drill-down></drill-down>',
               scope: $scope,
               preserveScope: true,
               targetEvent: event,
               clickOutsideToClose: false,
               controller: BarController,
               controllerAs: 'BarController'
              });

我为它制作了一个组件并在template标签中使用它。 $mdDialog来自角度本身。在此之后，您可以在此弹出窗口中使用名为Jquery Data table的漂亮框架。

link：https://datatables.net/

在此框架中，您可以指定所需的向下钻取数据。它还支持过滤，分页和导出功能，如PDF或Excel。

Answer 2

如果它的展开/折叠意味着使用。

<table class="table">
<tr><th>...</th></tr>
<ng-container *ngFor="let parent in parents">
 <tr (click)="onParentRowClicked(parent.Id)"[ngClass]="{'row-selected table-active':isExpanded(payment.Id)}">....<tr/>
 <tr *ngIf="isExpanded(repayment)" class="row-selected-content">
    <td colspan="9">
     <child [model]="parent.children></child >
    </td>
 </tr>
</ng-container>
</table>

但我个人认为，如果你需要扩展和折叠几个级别，最好使用面板/卡片。对于不同级别的所有列标题来说，这很困难

Angular 5表具有向下钻取功能

2 个答案: