恢复 prime-ng p-table 中手动调整大小的 table 列的大小

Question

对于 primeng 中 'resizableColumns="true"' 的 p-table，有什么方法可以将列的宽度恢复到初始状态吗？我想给用户一个选项来重置回默认大小。

Answer 1

您可以创建一个按钮或任何事件，并关联一个函数来更新您的 table 列宽。我试过这个，它非常适合男士。

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

重新验证您的 table 将解决您的问题。

Here is an example

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 正在对象 whit 参数 columnWidths 中保存 localStorage 或 sessionStorage 中的列宽如果你想重置列宽 eyseist 方法是删除它

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

对象名称使用属性 stateKey="object name"

在 p-table 标签中设置

恢复 prime-ng p-table 中手动调整大小的 table 列的大小

To restore size of manually resized table columns in prime-ng p-table

javascript

typescript

primeng

angular