J'ai un PrimeNg turbotable avec la fonctionnalité d'expansion de la ligne.
Comment puis-je développer les lignes par défaut.
Voici mon code:
HTML
<p-table [columns]="cols" [value]="cars" dataKey="vin">
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 2.25em"></th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
<tr>
<td>
<a href="#" [pRowToggler]="rowData">
<i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
</a>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
<tr>
<td [attr.colspan]="columns.length + 1">
<div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-g-12 ui-md-3" style="text-align:center">
<img [attr.alt]="rowData.brand" src="assets/showcase/images/demo/car/{{rowData.brand}}.png">
</div>
<div class="ui-g-12 ui-md-9">
<div class="ui-g">
<div class="ui-g-12">
<b>Vin:</b> {{rowData.vin}}
</div>
<div class="ui-g-12">
<b>Vin:</b> {{rowData.color}}
</div>
<div class="ui-g-12">
<b>Brand:</b> {{rowData.brand}}
</div>
<div class="ui-g-12">
<b>Color:</b> {{rowData.color}}
</div>
</div>
</div>
</div>
</td>
</tr>
</ng-template>
</p-table>
Ts
export class TableRowExpansionDemo implements OnInit {
cars: Car[];
cols: any[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
this.cols = [
{ field: 'vin', header: 'Vin' },
{ field: 'year', header: 'Year' },
{ field: 'brand', header: 'Brand' },
{ field: 'color', header: 'Color' }
];
}
}
}
J'ai essayé d'utiliser l'attribut expandRowKeys, mais cela ne fonctionne pas pour moi.
Qu'est-ce que j'oublie ici?
Merci
J'ai essayé d'utiliser l'attribut expandRowKeys
Oui tu as raison. Donc, ajoutez [expandedRowKeys]="expandedRows">
à p-table
élément:
<p-table [columns]="cols" [value]="cars" dataKey="vin" [expandedRowKeys]="expandedRows">
et ensuite, il vous suffit de remplir l'objet expandedRows
avec les valeurs vin
des lignes à développer (car dataKey
est vin
).
Parce que vous voulez que toutes les lignes soient développées, vous pouvez le remplir comme ça:
const thisRef = this;
this.cars.forEach(function(car) {
thisRef.expandedRows[car.vin] = 1;
});
afin d'avoir quelque chose comme expandedRows = {"dsad231ff": 1, "gwregre345": 1, ...}
Voir travail Plunker
Dans la réponse acceptée, le expandRows mappage à la table turbo expandRowKeys est un moyen, c’est-à-dire qu’il peut définir l’état des lignes au moment du chargement uniquement. Une fois la table chargée, vous pouvez directement modifier la variable ' ExpandedRowKeys ' en transmettant la référence de la table à partir du code HTML.
Définir votre table avec une variable de référence #dt
<p-table #dt [columns]="cols" [value]="cars" dataKey="vin">
Modifiez votre corps de table comme ceci pour obtenir un déclencheur sur la fonction clic
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
<tr>
<td>
<a href="#" [pRowToggler]="rowData">
<i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
</a>
</td>
<td *ngFor="let col of columns">
<a >
<span (click)="onItemClick(rowData, dt)">
{{rowData[col.field]}}
</span>
</a>
</td>
</tr>
</ng-template>
dans votre fichier TS, ajoutez la fonction en tant que
onItemClick(rowData:any, dt:any) {
if(dt.expandedRowKeys[rowData._id]){
dt.expandedRowKeys[rowData._id] = 0;
}
else {
dt.expandedRowKeys[rowData._id] = 1;
}
}
Cette approche vous donne plus de liberté pour changer d'état de table sur un déclencheur d'événement hors de la table et pour développer ou réduire plusieurs lignes à la fois.