首页 > 解决方案 > 如何冻结 PrimeNG 数据表中标题下方行的动态选择

问题描述

我已经设法冻结标题和列,但现在还需要冻结我想在标题下方显示的行的动态选择。

这是当前数据表html。请告诉我如何添加它。

  <p-table [columns]="store.fields" [value]="playerSeasonStats" [scrollable]="true" [scrollHeight]="tableHeight" frozenWidth="240px">
    <ng-template pTemplate="frozencolgroup" let-columns>
      <colgroup>
        <col style="width:160px">
        <col style="width:80px">
      </colgroup>
    </ng-template>
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col style="width:160px">
        <col style="width:160px">
        <col style="width:80px">
        <col style="width:80px">
        <col *ngFor="let col of columns" style="width:100px">
      </colgroup>
    </ng-template>
    <ng-template pTemplate="frozenheader">
      <tr>
        <th style="height:83px" [pSortableColumn]="'player_name'">Name</th>
        <th style="height:83px" [pSortableColumn]="'season'">Season</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="frozenbody" let-rowData>
      <tr>
        <td (click)="toggleAnalyzed(rowData?.player_instatid)">{{rowData['player_name']}}</td>
        <td>{{rowData['season']}}</td>
      </tr>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th [pSortableColumn]="'team_name'">Club</th>
        <th [pSortableColumn]="'league_name'">League</th>
        <th [pSortableColumn]="'primary_position'">Position</th>
        <th [pSortableColumn]="'matches_count'">Matches count</th>
        <th *ngFor="let col of columns" [pSortableColumn]="col">
          {{capitalizeField(col)}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr>
        <td>{{rowData['team_name']}}</td>
        <td>{{rowData['league_name']}}</td>
        <td>{{rowData['primary_position']}}</td>
        <td>{{rowData['matches_count']}}</td>
        <td *ngFor="let col of columns" [ngClass]="colorCondition(rowData, col)">
          {{rowData[col]}}
        </td>
      </tr>
    </ng-template>
  </p-table>

标签: rowprimengfreezeprimeng-turbotable

解决方案


推荐阅读