Wie Reihe von Datentabelle erweitern programmatisch

Question

Ich mag Reihe erweitern direkt von einer Typoskript Methode habe ich mit @viewchild versuchen, aber es funktioniert nicht:

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> 

Typoskript:

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); 
} 

Reihe sich nicht ausdehnt, wenn mir jemand sagen könnte, wie die gleiche th zu tun Wenn das (onRowClick) -Ereignis aber innerhalb einer Typoskript-Methode abläuft, bin ich dankbar.

Showcase for another html example

Answer 1

Es gibt eine propertyexpandedRows die ein Array von allen aktuellen Zeilen erweitert ist. Sie sollten Ihre Zeile zu dieser Liste hinzufügen/entfernen können, um die Zeilenerweiterung umzuschalten.

Sie müssen haben:

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

und

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

Einfache Plunker aber Sie bekommen die Idee ... https://plnkr.co/edit/Zra8UUMv4XQCv0lbRbMg?p=preview

Answer 2

Es ist ein toggleRow Verfahren auf der Ebene der Die Datentabelle, die Takes ausführt, schaltet die Zeilenerweiterung für gegebene Zeilendaten um, die als Parameter übergeben werden:

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

Answer 3

Sie können wie

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

Answer 4

dieser Code unten eine andere Datentabelle oder Ansicht nach der letzten Spalte hinzufügen Versuchen:

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

Answer 5

Sie diese Zwecke nur für Hin- und Herschalten verwenden kann (Bitte stellen Sie sicher, definiert [pSelectableRow] = "rowData" in Ihrem Vorlagenkörper.

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

Wenn Sie etwas individuellere benötigt, dann definiert Sie können, eine Referenz genannt #dtEntry: -

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

Irgendwo im Code - bemerken wir vorbei in (rowData, DTEntry) über

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

Sie könnten das folgende Skript in Ihrem Code haben, um onRowSave zu behandeln.

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

}