Question

用primeng turbo表扩展添加两个级别的行扩展的好方法是什么？

由于它似乎不是开箱即用的，我已经尝试过思考如何做到这一点。

下面的行组只有一个行扩展模板。我希望它看起来像网站上的第一个选项（here），但在数据下方还有另一个切换行（两个级别）

<h3 class="first">Toggleable Row Groups</h3>
<p-table [value]="cars" dataKey="brand">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
            <td colspan="3">
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                    <span>{{rowData.brand}}</span>
                </a>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td>{{rowData.vin}}</td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.color}}</td>
        </tr>
    </ng-template>
    <!-- Is it possible to add another row expansion here? -->
</p-table>

Answer 1

感谢@SebOlens的定向帮助，以下是实现两级扩展的一种方法。

在pTemplate = body中，在最后一个TR之后，添加一个ng-container，其中包含要添加的数据的上下文
添加扩展模板。在模板中，仅在单击第二级扩展（即，使用诸如“ viewDetails”之类的属性）时，使该行可见。
在pTemplate正文中的任意位置添加下拉V形。单击时切换“ viewDetails”的值

这是stackblitz链接：https://stackblitz.com/edit/angular-rzu7rt

模板代码：

<h3 class="first">Toggleable Row Groups</h3>
<p-table [value]="cars" dataKey="brand">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
            <td colspan="3">
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                    <span>{{rowData.brand}}</span>
                </a>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex" let-rowData.viewDetails="false">
        <tr>
            <td>{{rowData.vin}}
                <! -- added row expansion chevron -->
                    <i (click)="rowData.viewDetails = !rowData.viewDetails" [ngClass]="rowData.viewDetails ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
            </td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.color}}</td>
        </tr>
        <ng-container *ngTemplateOutlet="extensiontemplate; context: rowData"></ng-container>
        <ng-template #extensiontemplate>
            <tr *ngIf="rowData.viewDetails">
                <td colspan="3">
                    Additional row data here for VIN ID: {{rowData.vin}}                  
                </td>
            </tr>
        </ng-template>
    </ng-template>
</p-table>

primeNG Turbo表的两级行扩展

1 个答案: