web-dev-qa-db-ja.com

プログラムでデータテーブルから行を展開する方法

TypeScriptメソッドから直接行を展開したいのですが、@ viewchildで試しましたが、機能しません：

HTML：

<p-dataTable [value]="array" [responsive]="true" expandableRows="true" #dt
   (onRowClick)="dt.toggleRow($event.data)">
    <template let-test pTemplate="rowexpansion">
        <div class="ui-grid ui-grid-responsive ui-fluid">
            <div class="ui-grid-row">
                Bouh !
            </div>
        </div>
    </template>
    <p-column field="name" header="Vin"></p-column>
    <p-column field="company" header="Year"></p-column> 
</p-dataTable>
<button class="btn" (click)="addComment()">
    <p>add comment</p>
</button>

TypeScript：

import { DataTable } from 'primeng/components/datatable/datatable';

export class MyAwesomeComponent implements OnInit {

@ViewChild('dt') datatable : DataTable;

addComment(): void {
    console.log(this.datatable);
    this.datatable.toggleRow(1);
}

行は展開されません。誰かが（onRowClick）イベントと同じことを行う方法を教えてくれれば、TypeScriptメソッド内で感謝します。

別のhtmlの例のショーケース

angularprimeng
5
Joffrey Hernandez

propertyexpandedRowsがあります。これは、現在展開されているすべての行の配列です。このリストに行を追加/削除して、行の展開を切り替えることができるはずです。

必要なもの：

<p-dataTable [expandableRows]="true" [expandedRows]="expandedItems"></p-dataTable>

そして

expandedItems: Array<any> = new Array<any>();
// expand row
this.expandedItems.pop(this.gridData[rownumber]);
// hide row
this.expandedItems.Push(this.gridData[rownumber]);

単純なプランカーですが、アイデアは得られます... https://plnkr.co/edit/Zra8UUMv4XQCv0lbRbMg?p=preview

9
emp

データテーブルのレベルには、パラメータとして渡される行データを取得するtoggleRowメソッドがあります。

<p-dataTable #dt [value]="cars" expandableRows="true"
    (onRowClick)="dt.toggleRow($event.data)">

  <p-column field="year" header="Year"></p-column>

  <ng-template let-car pTemplate="rowexpansion">
    expanded row
    {{ car.brand }}
  </ng-template>

</p-dataTable>
2
Stephen Gibson

以下のコードのように、最後の列の後に別のデータテーブルまたはビューを追加できます

 <p-dataTable 
                    [value]="reviewPanels">
<p-column [style]="{'width':'35px'}" expander="true" ></p-column>
<p-column  ></p-column>
<ng-template let-cp pTemplate="rowexpansion">

 <p-dataTable 
         [value]="cp.listreviewerlist" >
<p-column></p-column>
</p-dataTable>
</ng-template>
</p-dataTable>
1
Maulik Patel

これを試して：

addComment(): void {
    console.log(this.datatable);
    this.datatable.toggleRow(this.datatable.selection);
}
1
Boki

これは、切り替えの目的でのみ使用できます（テンプレート本体で[pSelectableRow] = "rowData"を定義していることを確認してください。

<p-button label="Save" [pRowToggler]="rowData"></p-button>

よりカスタマイズされたものが必要な場合は、＃dtEntryという参照を定義できます：-

<p-table #dtEntry [columns]="dataEntryColumns" [value]="data.rptSkMimp" 
            selectionMode="single" [paginator]="true" [rows]="10" dataKey="txnId">

コードのどこか-上記の（rowdata、dtEntry）を渡していることに注意してください

<p-button icon="fa fa-fw fa-plus" label="Save" (click)="onRowSave(rowData, dtEntry)"></p-button>

OnRowSaveを処理するために、コードに次のスクリプトが含まれている場合があります。

onRowSave(rowData:any, dt:any) {   
dt.toggleRow(rowData);

}

1
kepung