Два уровня расширения ряда с турбо столом PrimeNG - PullRequest
Новая
       7

Два уровня расширения ряда с турбо столом PrimeNG

0 голосов
/ 10 января 2019

Что было бы хорошим способом добавить два уровня расширения строки с расширением первичной таблицы турбо?

Я пытался продумать, как это сделать, поскольку, похоже, он не выходит из коробки.

Существует только один шаблон расширения для группы строк ниже. Я бы хотел, чтобы он выглядел как первый вариант на сайте ( здесь ), но также имел еще одну строку переключения под данными (два уровня) 

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

1 Ответ

0 голосов
/ 16 января 2019

Ниже приведен один способ заставить работать двухуровневое расширение, благодаря направленной помощи @ SebOlens.

  1. В pTemplate = body после последнего TR добавьте ng-контейнер с контекстом для данных, которые вы хотите добавить

  2. Добавить шаблон расширения. В шаблоне сделайте строку видимой, только если щелкнуть расширение 2-го уровня (т.е. использовать свойство, такое как "viewDetails")

  3. Добавьте выпадающий шеврон в любом месте в теле pTemplate. Переключить значение «viewDetails» при нажатии

Вот ссылка на стек: 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>
...