Question

对于public static void buildFromFile(String location) throws FileNotFoundException{ File file = new File(location); Scanner input = new Scanner(file); while(input.hasNextLine()) { String data = input.nextLine(); for(int i = 0; i <= people.length; i++) { people[i].setName(data); } } for(int i = 0; i <= people.length; i++) { System.out.println(people[i]); }中带有p-table的{{1}}，是否可以将列的宽度恢复到初始状态？我想给用户一个选项，以重置为默认大小。

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

重新验证您的表即可解决您的问题。

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)
  }

}

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

2 个答案: