primeNG Turbo表的两个级别的行扩展 [英] Two levels of row expansion with primeNG turbo table

问题描述

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

What would be a good way to add two levels of row expansion with the primeng turbo table extension?

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

I've tried thinking through how to do this, as it does not seem to come out of the box.

下面的行组只有一个行扩展模板.我希望它看起来像网站上的第一个选项(此处)，但数据下方还有另一个切换行(两个级别)

There is only one rowexpansion template to the row group below. I would like it to look like the first option on the site (here), but also have another toggle row beneath the data (two levels)

<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>

推荐答案

由于@SebOlens的定向帮助，以下是使两级扩展正常工作的一种方法.

Below is one way to get two level expansion to work, thanks to directional help from @SebOlens.

1. 在pTemplate = body中，在最后一个TR之后，添加一个ng-container，其中包含要添加的数据的上下文

1. In pTemplate=body, after the last TR, add an ng-container, with context for data you want to add

添加扩展模板.在模板中，仅当单击第二级扩展(即，使用诸如"viewDetails"之类的属性)时，才使该行可见.

Add an extension template. In the template, make the row visible only if the 2nd level expansion is clicked (i.e., use a property such as "viewDetails")

在pTemplate正文中的任意位置添加下拉V形.单击时切换"viewDetails"的值

Add the dropdown chevron wherever you like in the pTemplate body. Toggle the value of "viewDetails" when clicked

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

Here is the stackblitz link: 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表的两个级别的行扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！