在 prime-ng p-table 中恢復手動調整大小的表列的大小

Question

對於primeng p-table帶有'resizableColumns="true"'的p-table ，有沒有辦法將列的寬度恢復到它們的初始狀態？ 我想給用戶一個選項來重置回默認大小。

Answer 1

您可以創建一個按鈕或任何事件，並關聯一個更新表列寬度的函數。 我嘗試過，它非常適合男士。

ngOnInit() {
     this.list =  myservice.getList();
     this.resetWidth();
}

resetWidth(){
   this.cols = [
        { field: 'a', header: 'A', width: '25%'},
        { field: 'b', header: 'B', width: '15%' },
        { field: 'c', header: 'C', width: '35%' },
        { field: 'd', header: 'D', width: '25%' }
    ];
}

為您html：

<button pButton type="button" (click)="resetWidth()" label="Reset"></button>

Answer 2

重新驗證表將解決您的問題。

這是一個例子

HTML

<p-table #dt [columns]="cols" [value]="cars1" [resizableColumns]="isResisable" [loading]="isLoading" *ngIf="!isLoading" >
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn>
                {{col.header}}
            </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>

<button (click)="resettable()" >Reset Initial </button>

TS

import { Component, OnInit, ViewChild } from '@angular/core';

import { LazyLoadEvent, DataTable } from 'primeng/primeng';

import { CarService } from './app.service'
import { Car } from './car.model'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('dt') public dataTable: DataTable;

  cars1: Car[];

  isResisable: boolean = true;;

  cols: any[];
  isLoading: boolean;
  constructor(private carService: CarService) { }

  ngOnInit() {

    this.cars1 =
      [
        { "brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff" },
        { "brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345" },
        { "brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr" },
        { "brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh" },
        { "brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34" },
        { "brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj" },
        { "brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr" },
        { "brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34" },
        { "brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5" },
        { "brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s" }
      ]


    this.cols = [
      { field: 'vin', header: 'Vin', width: '25%' },
      { field: 'year', header: 'Year', width: '15%' },
      { field: 'brand', header: 'Brand', width: '35%' },
      { field: 'color', header: 'Color', width: '25%' }
    ];
  }

  resettable() {
    this.isLoading = true;
    this.cars1 = [...this.cars1];
    // this.dataTable.reset();
    setTimeout( () =>{
      this.isLoading =false;
    },3)
  }

}

Answer 3

p-table 將列寬保存在 localStorage 或 sessionStorage 中的對象 whit 參數 columnWidths 如果你想重置列寬

sessionStorage.removeItem('object name'); or localStorage.removeItem('object name');

使用屬性stateKey="object name"在 p-table 標簽中設置stateKey="object name"