기본적으로 PrimeNG 터보 테이블 확장

기본적으로 PrimeNG 터보 테이블 확장

행 확장 기능이 있는 PrimeNg 터보 테이블을 가지고 있습니다.

기본적으로 행을 확장하려면 어떻게 해야 합니까?

내 코드는 다음과 같습니다.

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 속성을 사용하려고 했지만 작동하지 않습니다.

내가 여기서 뭘 놓쳤지요?

감사해요.

업데이트: 버전 > 7.x의 경우

값을 1로 설정하면 버전 7+에서 boolean(true/false)을 사용할 수 없습니다.

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

작업 스택 블리츠

버전 <7.x의 경우

expandRowKeys 속성을 사용해 보았습니다.

네, 맞습니다.그래서 추가[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, ...}

작업 플런커 참조

허용된 답변에서 expandedRowKeys라는 터보 테이블 expandedRowKeys에 대한 expandedRows 매핑은 한 가지 방법입니다. 즉, 로드 시에만 행 상태를 설정할 수 있습니다.테이블이 로드된 후 다른 사용자가 테이블을 접거나 확장하려는 경우 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;
   }
}

이 방법을 사용하면 테이블 외부에서 이벤트 트리거에 대한 테이블 상태를 변경하고 여러 행을 한 번에 확장하거나 축소할 수 있습니다.

많은 솔루션을 시도한 후 가장 쉬운 해결 방법을 찾았습니다.

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

서비스 또는 http 호출에서 가져온 개체 목록에서 데이터 키 값을 고유 ID 키로 바꿉니다.

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

언급URL : https://stackoverflow.com/questions/48925945/primeng-turbotable-expand-by-default