我可以在垫扩展行内显示另一个表吗? [英] Can I display another table inside mat-expanded row?
问题描述
我有一个带有扩展行的垫子桌子.如果我单击一行，它将展开并显示一个硬编码的字符串. 我想在展开的行中显示另一个表.是否有可能? 或者，是否有其他任何技术或方法可以实现我想要做的事情. 我正在尝试显示给定时间段内已执行作业的列表. 在主行上，我只想显示时间段，例如01-01-2017 TO 01-05-2017，当用户单击该行时，它将展开并显示具有其他详细信息(如日期，时间，用户)的作业列表，状态等.
I have a mat-table with an expanded row. If I click on a row it expands and displays a hardcoded string. I would like to display another table inside the expanded row. Is it possible? Alternatively, is there any other technique or method to achieve what I am trying to do. I am trying to display List of executed Jobs for a given time period. On main row, I want to show only time period something like 01-01-2017 TO 01-05-2017 and when a user clicks on that row it will expand and display a list of jobs with other details like date, time, user, status etc.. will be displayed
HTML代码:-
<mat-table [dataSource]="jobExecutionStat">
<!-- Id Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef>
Serial Number
</mat-header-cell>
<mat-cell *matCellDef="let element; let i = index"
>{{ i + 1 }}
</mat-cell>
</ng-container>
<!-- Execution Date Column -->
<ng-container matColumnDef="executionDate">
<mat-header-cell *matHeaderCellDef>
Execution Date
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.executionDate | date: 'yyyy-MM-dd' }}
</mat-cell>
</ng-container>
<!-- After Time Period Column -->
<ng-container matColumnDef="afterTimePeriod">
<mat-header-cell *matHeaderCellDef>
Current Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.afterTimePeriod }}
</mat-cell>
</ng-container>
<!-- Previous Time Period Column -->
<ng-container matColumnDef="previousTimePeriod">
<mat-header-cell *matHeaderCellDef>
Previous Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.previousTimePeriod }}
</mat-cell>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.status }}
</mat-cell>
</ng-container>
<!-- Code for Stop and Re-Run Buttons -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element; let index = index">
<button
*ngIf="index === 0"
mat-icon-button
(click)="stop_exec_job(element)"
matTooltip="Stop Executing the Job"
[disabled]="
element.status == 'SUCCESS' ||
element.status == 'FINISH' ||
element.status == 'CANCELLED'
"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
<!-- Delete icon for row -->
<button
*ngIf="index === 0"
mat-icon-button
(click)="re_run_job(element)"
matTooltip="Re-Run the Job"
[disabled]="
element.status == 'RUNNING' ||
element.status == 'Pending'
"
>
<i class="material-icons" style="color:green">
cached
</i>
</button>
</mat-cell>
</ng-container>
<!-- Code for Spinner -->
<ng-container matColumnDef="spinner">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element">
<div
*ngIf="
element.status == 'Running';
else doNotShowSpinner
"
>
<mat-spinner
mode="indeterminate"
[diameter]="20"
></mat-spinner>
</div>
<ng-template #doNotShowSpinner> </ng-template>
</mat-cell>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let detail">
Sample Text
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="jobExecStatDisplayedColumns"
></mat-header-row>
<mat-row
*matRowDef="let row; columns: jobExecStatDisplayedColumns"
matRipple
class="element-row"
[class.expanded]="expandedElement == row"
(click)="
expandedElement === row
? (expandedElement = null)
: (expandedElement = row)
"
>
</mat-row>
<mat-row
*matRowDef="
let row;
columns: ['expandedDetail'];
when: isExpansionDetailRow
"
[@detailExpand]="
row.element == expandedElement ? 'expanded' : 'collapsed'
"
style="overflow: hidden"
>
</mat-row>
</mat-table>
推荐答案
是的，可以退房 此 堆叠闪电战.
Yes you can, check out this stackblitz.
只需像往常一样添加另一个mat-table，包括数据源，列定义等.
Just add another mat-table like you normally would, including a datasource, column definitions etc.
要注意的重要一点是，您需要确保扩展行中的表跨越所有列(除非您不希望这样做).将明细行的attr.colspan属性设置为要跨越的列数，通常只需将displayedColumns数组的length用于跨越所有列.
On important thing to note is that you need to make sure your table in the expanded row spans all columns (unless you don't want it to). Set the attr.colspan attribute of the detail row to the number of columns you want to span, usually you can just take the length of your displayedColumns array to span all columns.
这篇关于我可以在垫扩展行内显示另一个表吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
