primeng turbotable 列通过滚动自动调整大小答案

【问题标题】：primeng turbotable column auto-sizing with scrollingprimeng turbotable 列通过滚动自动调整大小
【发布时间】：2018-09-15 03:01:35
【问题描述】：

我正在使用涡轮表并想要以下内容：

根据内容自动调整所有列的大小。
让表格本身水平填充屏幕，例如不要手动指定宽度
当自动调整大小的列需要的空间超过表格宽度所能提供的空间时，让表格水平滚动，而无需手动指定任何列宽，以及在添加带有列切换的新列时。

从我得到的 turboable 示例中：

<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="200px" 
[style]="{'width':'100%'}">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width:250px">
        </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>

但我不想使用

<col *ngFor="let col of columns" style="width:250px">

这是plnkr

【问题讨论】：

您是否尝试过使用autoLayout 属性？来自文档：如果您需要单元格根据其内容进行缩放，请将 autoLayout 属性设置为 true。
您找到问题的答案了吗？

标签： angular primeng primeng-turbotable

【解决方案1】：

在您的文件 .html 中使用此代码

<p-table [style]="{'overflow':'auto!important'}"
[columns]="cols"  [value]="Dataset"
[resizableColumns]="true" columnResizeMode="expand" 
[responsive]="true"  [rows]="20"
   [immutable]=false
   [paginator]="true" [rowsPerPageOptions]="[10,15,20,25]">
   <ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn >
            {{col.header}}
            <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td *ngFor="let col of columns" class="ui-resizable-column">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>
</p-table>

和添加此 css 代码 bor 自动调整并重新销售列 .scss

//table ui
::ng-deep  .ui-table table, .ui-table table
{  table-layout:auto !important;
}
::ng-deep .ui-table-tablewrapper {
    width: auto!important;
}

::ng-deep .ui-table-resizable {
    padding-bottom: 1px;
    /* overflow: auto; */
    width: auto !important;
}
.ui-table .ui-table-tbody > tr, .ui-table .ui-table-thead > tr > th, .ui-table .ui-table-tfoot > tr > td{
    max-width: 300px !important;
    font-size: 12px;
    padding: 0px !important;
    padding-left: 4px !important;
    color: black;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
    border-width: 1px;
}

【讨论】：

我试过了，正文内容很合适。但表头单元格和表体单元格宽度不匹配。

【解决方案2】：

出于性能原因，默认表格布局是固定的，这意味着单元格宽度不取决于其内容。如果您需要单元格根据其内容进行缩放，请将 autoLayout 属性设置为 true。

<p-table [columns]="cols" [value]="cars" [scrollable]="true" 
       scrollHeight="200px" [autoLayout]="true">
 </p-table>

【讨论】：

【解决方案3】：

PrimeNG p-table 不支持滚动自动适应（请参阅here）

通过挂钩 p-table 的状态功能，我设法让滚动、列重新排序、列大小调整和模拟自动调整一起工作。

<p-table
    *ngIf="!loading"
    [columns]="selectedColumns"
    [value]="listRows"
    [(selection)]="selectedRows"
    [rows]="pageSize"
    [totalRecords]="rowCount"
    (sortFunction)="sort($event)"
    [customSort]="true"
    [responsive]="true"
    [scrollable]="true"
    scrollHeight="550px"
    [columnResizeMode]="'expand'"
    [reorderableColumns]="true"
    [resizableColumns]="true"
    stateStorage="local"
    [stateKey]="tableStateKey"
>

然后在我的表第一次初始化之前，我检查状态是否存在。如果不存在，我会计算所有列和行的最长文本宽度，并使用此函数将其保存在表状态存储中

@ViewChild("myCanvas") myCanvas: ElementRef;
.
.
.
getTextLength(text: string) {
const ctx = this.myCanvas.nativeElement.getContext("2d");
ctx.font =
'14px "Univers Next W01 Light", Helvetica, Arial, sans-serif';
return Math.round(ctx.measureText(text).width);
}

这是遍历所有数据的函数

setInitialColumnWidths(columns: any[], rows: any[]) {
    // Attempt to guess initial column width if we don't have any stored yet
    let tableState = JSON.parse(localStorage.getItem(this.tableStateKey));
    if (!tableState) {
        tableState = {};
        // Add some width for the selection checkbox column
        const colWidths = [47];
        const colOrder = [];
        this.cols.forEach(col => {
            let maxStringLength = this.getTextLength(col.header);
            maxStringLength = maxStringLength < 100 ? 100 : maxStringLength;
            rows.forEach(row => {
                if (
                    col.field &&
                    row[col.field] &&
                    this.getTextLength(row[col.field]) > maxStringLength
                ) {
                    maxStringLength = this.getTextLength(row[col.field]);
                }
            });
            // Add some extra pixels for padding etc.
            colWidths.push(maxStringLength + 50);
            colOrder.push(col.field);
        });
        // The PrimeNG table component state requires the column order to be specified as well
        tableState["columnOrder"] = colOrder;
        tableState["columnWidths"] = colWidths.join(",");
        localStorage.setItem(
            this.tableStateKey,
            JSON.stringify(tableState)
        );
    }
}

这比我想的要好。显然它不适合其他页面中其余数据中较长的字符串，但它至少设置了 100px 的最小值，并且一旦用户调整了列宽，新的宽度就会存储在本地存储中。

【讨论】：

【解决方案4】：

使用 colgroup 中提到的 https://www.primefaces.org/primeng/showcase/#/table/scroll

用于水平和垂直滚动的表格

【讨论】：