web-dev-qa-db-ja.com

PrimeNG Turbotableはデフォルトで展開します

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属性を使用してみましたが、機能していません。

ここで何が欠けていますか？

ありがとう

html5angulartypescriptprimengprimeng-turbotable
16
Mak

更新：バージョン> 7.xの場合

値を1に設定しても、バージョン7以降では動作しませんboolean（true/false）を使用します

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

作業中 StackBlitz

バージョン<7.xの場合

ExpandedRowKeys属性を使用してみました

はい、あなたが正しい。したがって、[expandedRowKeys]="expandedRows">をp-table要素に追加します。

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

次に、expandedRowsオブジェクトに、展開する行のvin値を入力するだけです（dataKeyはvinであるため）。

すべての行を展開するため、次のように入力できます。

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

expandedRows = {"dsad231ff": 1, "gwregre345": 1, ...}のようなものを持つために

作業を参照してください Plunker

18
Antikhippe

受け入れられた答えでは、expandedRowsターボテーブルへのマッピングexpandedRowKeysは1つの方法です。つまり、ロード時のみ行の状態を設定できます。テーブルのロード後に誰かが折りたたんだり展開したい場合は、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;
   }
}

このアプローチにより、テーブルの外部からのイベントのトリガーでテーブルの状態を変更し、複数の行を一度に展開または縮小する自由度が高まります。

2
himanshu goyal

多くの解決策を見つけた後、解決する最も簡単な方法を試しました

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

Datakey値を、サービスまたはhttp呼び出しから取得したオブジェクトのリストから一意のidキーに置き換えます。

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