如何冻结 PrimeNg 数据表中的列 - Angular 2？

Posted 2023-05-07

【中文标题】如何冻结 PrimeNg 数据表中的列 - Angular 2？

【英文标题】：How to freeze columns in PrimeNg data table - Angular 2?

【发布时间】：2016-12-02 14:23:12

【问题描述】：

在 PrimeNg 数据表中，是否可以冻结前几列并为其余列使用水平滚动 x？ 我想要与此完全相似：

https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html

【参考方案1】：

<p-dataTable [value]="..yoursource" [frozenWidth]="Set your frozen width in px" [unfrozenWidth]="Set your un frozen width in px">

    -- frozen column
    <p-column [header]="" [frozen]="true">
      <template>                      
      </template>
    </p-column>

   --unfrozen column
    <p-column>
    <p-column>

</p-dataTable>

【参考方案2】：

下面的代码将启用水平和垂直滚动的冻结列

在水平滚动中，为列指定固定宽度很重要。通常，在自定义可滚动表格的列宽时，请使用 colgroup 如下所示以避免错位问题，因为它将同时应用页眉、正文和页脚部分，这些部分在内部是不同的独立元素。

HTML 神殿

<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="data" [scrollable]="true" scrollHeight="500px" frozenWidth="250px">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" [style.width.px]="col.width">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                col.header
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                rowData[col.field]
            </td>
        </tr>
    </ng-template>
</p-table>

TS 代码

frozenCols: any[];

scrollableCols: any[];

ngOnInit() 

    this.scrollableCols = [
         field: 'year', header: 'Year', width: 250 ,
         field: 'brand', header: 'Brand', width: 250 ,
         field: 'color', header: 'Color', width: 250 ,
         field: 'year', header: 'Year', width: 250 ,
         field: 'brand', header: 'Brand', width: 250 ,
         field: 'color', header: 'Color', width: 250 
    ];

    this.frozenCols = [
         field: 'vin', header: 'Vin', width: 250 
    ];

Check here for more