typescript PrimeNG Turbotable 默认展开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48925945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeNG Turbotable expand by default
提问by Mak
I have a PrimeNg turbotablewith row expansion feature.
我有一个带有行扩展功能的PrimeNg turbotable。
How can I expand the rows by default.
默认情况下如何扩展行。
Here is my Code :
这是我的代码：
HTML
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
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' }
];
}
}
}
I tried using expandedRowKeysattribute, but it is not working for me.
我尝试使用expandRowKeys属性，但它对我不起作用。
What am I missing here?
我在这里错过了什么？
Thanks
谢谢
回答by Antikhippe
Update: For Version >7.x
更新：对于版本 >7.x
Setting value to 1 won't work on version 7+ use boolean(true/false)
将值设置为 1 在版本 7+ 上不起作用，使用 boolean(true/false)
const thisRef = this;
this.cars.forEach(function(car) {
thisRef.expandedRows[car.vin] = true;
});
Working StackBlitz
工作堆栈闪电战
For Version <7.x
对于版本 <7.x
I tried using expandedRowKeys attribute
我尝试使用 expandRowKeys 属性
Yes you're right. So add [expandedRowKeys]="expandedRows">to p-tableelement :
你是对的。所以添加[expandedRowKeys]="expandedRows">到p-table元素：
<p-table [columns]="cols" [value]="cars" dataKey="vin" [expandedRowKeys]="expandedRows">
and then, you just need to fill expandedRowsobject with vinvalues of the rows you want to expand (because dataKeyis vin).
然后，您只需要用要扩展的行的值填充expandedRows对象vin（因为dataKey是vin）。
Because you want all rows to be expanded, you can fill it like that :
因为您希望扩展所有行，所以可以像这样填充它：
const thisRef = this;
this.cars.forEach(function(car) {
thisRef.expandedRows[car.vin] = 1;
});
in order to have something like
expandedRows = {"dsad231ff": 1, "gwregre345": 1, ...}
为了有类似的东西
expandedRows = {"dsad231ff": 1, "gwregre345": 1, ...}
See working Plunker
查看工作的Plunker
回答by himanshu goyal
In the accepted answer, the expandedRowsmapping to the turbo table expandedRowKeysis one way i.e. it can set the state of rows at the time of loading only. If someone want to collapse or expand it after the table is loaded, you can directly edit the 'expandedRowKeys' variable by passing the table reference from the html.
在接受的答案中，将expandRows映射到 Turbo 表expandRowKeys是一种方式，即它只能在加载时设置行的状态。如果有人想在加载表格后折叠或展开它，您可以通过从 html 传递表格引用来直接编辑“ expandRowKeys”变量。
Define Your table with a reference variable #dt
使用参考变量#dt定义您的表
<p-table #dt [columns]="cols" [value]="cars" dataKey="vin">
Edit your table body like this to get a on click function trigger
像这样编辑您的表格主体以获得点击功能触发器
<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>
in your TS file add the function as
在您的 TS 文件中，将函数添加为
onItemClick(rowData:any, dt:any) {
if(dt.expandedRowKeys[rowData._id]){
dt.expandedRowKeys[rowData._id] = 0;
}
else {
dt.expandedRowKeys[rowData._id] = 1;
}
}
This approach gives you more freedom in changing state of table on a trigger of event from outside of table and expanding or collapsing multiple rows at once.
这种方法使您可以更自由地在表外部的事件触发器上更改表的状态，并一次展开或折叠多行。
回答by Ashish Yadav
After hitting many solution i tried and found easiest way to resolve
在找到许多解决方案后，我尝试并找到了最简单的解决方法
<p-table [columns]="cols" [value]="cars" dataKey="vin" [expandedRowKeys]="expandedRows">
Replace datakey value to your unique id key from list of objects fetched from service or http calls.
将 datakey 值替换为从服务或 http 调用获取的对象列表中的唯一 id 键。
<p-table [columns]="cols" [value]="repaymentsList" dataKey="id" expandableRows="true" rowExpandMode="single" [responsive]="true">
