PrimeNG Turbotable默认展开

Question

我有一个包含行扩展功能的PrimeNg TurboTable。

如何默认展开所有行。

这是我的代码：

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' }
        ];
        }
    }
}

我尝试使用 expandedRowKeys 属性，但它对我不起作用。

我错过了什么吗？

谢谢

- Mak

Answer 1

更新：针对版本 >7.x

将值设置为 1 在版本 7+ 上不起作用，请使用布尔值（true/false）

const thisRef = this;
 this.cars.forEach(function(car) {
   thisRef.expandedRows[car.vin] = true;
 });

在 StackBlitz 上工作。

对于版本<7.x

我试着使用 expandedRowKeys 属性。

是的，你是对的。所以在 p-table 元素中添加 [expandedRowKeys]="expandedRows"> ：

<p-table [columns]="cols" [value]="cars" dataKey="vin" [expandedRowKeys]="expandedRows">

然后，您只需要使用要扩展的行的vin值填充expandedRows对象（因为dataKey是vin）。

因为您想要展开所有行，所以可以像这样填充它：

    const thisRef = this;
    this.cars.forEach(function(car) {
      thisRef.expandedRows[car.vin] = 1;
    });

为了得到类似于expandedRows = {"dsad231ff": 1, "gwregre345": 1, ...}的东西

请参见可工作的Plunker

- Antikhippe

---

感谢@Antikhippe。在expandedRows = {"dsad231ff": 1, "gwregre345": 1, ...}中，数字1的用途是什么？ - Mak

我猜这意味着如果是1，相应的行将被展开，否则将被折叠。 - Antikhippe

当使用strict mode时，在forEach循环内部，this未定义（https://dev59.com/g2Ik5IYBdhLWcg3wPcGB）。 - Antikhippe

@VijayChauhan 设置为 true 而不是 1，请参见 https://stackblitz.com/edit/angular-3y2hkn?file=src/app/app.component.ts - Rishi0405

@Rishi0405 当我使用 thisRef.expandedRows[car.vin] = false; 时，需要点击两次才能展开任何行。为什么？有没有解决办法？ - Abhijeet Giram

Answer 2

在被接受的答案中，expandedRows映射到turbo表格的expandedRowKeys是一种方式，即它只能在加载时设置行的状态。如果有人想要在表格加载后折叠或展开它，可以通过从html传递表格引用直接编辑'expandedRowKeys'变量。

使用引用变量#dt定义您的表格。

<p-table #dt [columns]="cols" [value]="cars" dataKey="vin">

按照以下方式编辑您的表格主体，以获取单击函数触发器

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

在你的TS文件中添加该函数，如下：

onItemClick(rowData:any, dt:any) {
   if(dt.expandedRowKeys[rowData._id]){
     dt.expandedRowKeys[rowData._id] = 0;
   }
   else {
    dt.expandedRowKeys[rowData._id] = 1;
   }
}

这种方法使您在来自表格外部的事件触发时更加自由地更改表格状态，并一次性展开或折叠多行。

- himanshu goyal

Answer 3

在尝试了许多解决方案后，我发现最简单的解决方法是：Original Answer。

<p-table [columns]="cols" [value]="cars" dataKey="vin" [expandedRowKeys]="expandedRows">

将datakey的值替换为从服务或http调用获取的对象列表中的唯一id键。请注意，这里的"datakey"是一个变量名，需要根据上下文进行替换。

<p-table [columns]="cols" [value]="repaymentsList" dataKey="id" expandableRows="true" rowExpandMode="single" [responsive]="true">

- Ashish Yadav