Question

我想直接从打字稿方法扩展行，我尝试使用@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>

打字稿：

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）事件所做的事情，但在打字稿方法中，我将不胜感激。

Showcase for another html example

Answer 1

有property expandedRows是所有当前展开行的数组。您应该能够在此列表中添加/删除行以切换行扩展。

您需要：

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

简单的plunker但你明白了...... https://plnkr.co/edit/Zra8UUMv4XQCv0lbRbMg?p=preview

Answer 2

在数据表级别有一个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>

Answer 3

您可以在最后一列之后添加另一个数据表或视图，如下面的代码

 <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

试试这个：

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

Answer 5

您可以将其用于切换目的（请确保您在模板正文中定义了[pSelectableRow] =“rowData”。

    <ion-card color="transparent" class="no-box">
  <ion-icon name="more" md="md-more"  style="float:right;margin-right: 5px;" (click)="editBudget()"></ion-icon>
        <div class='circle-container'>
            <a><div class="center" [class.dropOverActive]="dropOverActive" mwlDroppable
              (dragEnter)="dropOverActive = true"
              (dragLeave)="dropOverActive = false" (drop)="onDrop($event)">
                <circle-progress
                [backgroundColor]="'#FFFFFF'"
                [showBackground]="true"
                [percent]= completePercent
                [maxPercent] = maxPercent
                [showTitle] = "true"
                [title]= "['3,530','Total Spend','', totalBudget, 'Total Budget']"
                [showSubtitle]= "false"
                [radius]= "70"
                [space]= "-12"
                [title]= "Chethan"
                [outerStrokeWidth]= "12"
                [outerStrokeColor]= "'#f0b048'"
                [innerStrokeColor]= "'#e7e8ea'"
                [innerStrokeWidth]= "12"
                [animateTitle]= "true"
                [animation]="true"
                [animationDuration]= "500"
                [showUnits]= "false"
                [titleFontSize]="15"
                [unitsFontSize]="15"
                [showBackground]= "false"
                [clockwise]= "true"
                ></circle-progress>
              </div>
            </a>
            <a><button class='deg0' (dragStart)="dragStart($event)" ion-fab mwlDraggable >Deg0</button></a>
            <a><button class ='deg45' ion-fab mwlDraggable >deg45</button> </a>
            <a><button class="deg90" ion-fab mwlDraggable >Deg90</button> </a>
            <a><button class='deg135' ion-fab mwlDraggable >deg135</button> </a>
            <a><button class='deg180' ion-fab mwlDraggable >deg180</button> </a>
            <a><button class='deg225' ion-fab mwlDraggable >deg225</button> </a>
            <a><button class='deg315' ion-fab mwlDraggable >deg315</button> </a>
            <a><button class="deg360" ion-fab mwlDraggable >deg360</button> </a>
         </div>
    </ion-card>


/*CSS*/

.deg0 {
  left:145px;
   z-index:2;
}
.deg45 {
    top: 110px;
    left: 100px;
    z-index:2;
}
.deg90 {
  top:150px;
 z-index:2; }
.deg135 {
  top: 110px;
    right: 100px;
    z-index:2;}
.deg180 { right:140px;
   z-index:2; }
.deg225 {
  bottom: 110px;
    right: 100px;
    z-index:2;}
.deg315 {
    bottom: 110px;
    left: 100px;
    z-index:2;}
.deg360 { bottom:150px;  z-index:2;}

    [mwlDraggable] {
      position: relative;
      z-index: 1;
      float: left;
      margin-right: 10px;
    }
    [mwlDroppable] {
      background-color: green;       
      position: relative;
      border-radius: 50%;
      width: 13em;
      height: 13em;
      bottom: 52px;
      right: 57px;
    }
    [mwlDraggable],[mwlDroppable] {
      color: white;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dropOverActive {
      background-color: lightgreen;
    }

如果你需要更多定制的东西，那么你可以定义一个名为#dtEntry的引用： -

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

代码中的某处 - 注意我们传入（rowdata，dtEntry）上面

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

您的代码中可能有以下脚本来处理onRowSave。

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

}

如何以编程方式从数据表扩展行

5 个答案: