Question

我正在使用ngx-datable来呈现具有行分组的表。

我正在尝试对行进行动态分组。

<ngx-datatable 
      [groupExpansionDefault]="false" [groupRowsBy]="groupBy">

groupBy的初始值为“ A”；

基于某些事件，我将groupBy更改为“ B”。

数据表本身不更新记录。当我单击标题行时，它将更新记录。而是应使用新分组自动更新表记录。

有没有解决方案，或者有什么方法可以模拟点击，即手动扩展/折叠标题行？

Answer 1

在下面查看一个示例

Working Demo

<ngx-datatable
    #myTable
    class='material expandable'
    [rows]="rows"
    [groupRowsBy]="'age'"
    [columnMode]="'force'"
    [scrollbarH]="true"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="40"
    [limit]="4"
    [groupExpansionDefault]="true">
    <!-- Group Header Template -->
    <ngx-datatable-group-header [rowHeight]="50" #myGroupHeader (toggle)="onDetailToggle($event)">
      <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <div style="padding-left:5px;">
          <a
            href="#"
            [class.datatable-icon-right]="!expanded"
            [class.datatable-icon-down]="expanded"
            title="Expand/Collapse Group"
            (click)="toggleExpandGroup(group)">
            <b>Age: {{group.value[0].age}}</b>
          </a>                          
        </div>
      </ng-template>
    </ngx-datatable-group-header>
    <!-- Row Detail Template -->
    <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <div style="padding-left:35px;">
          <div><strong>Address</strong></div>
          <div>row detail content sample</div>
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    <!-- Row Column Template -->
    <ngx-datatable-column
      [width]="50"
      [resizeable]="false"
      [sortable]="false"
      [draggable]="false"
      [canAutoResize]="false">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
        <a
          href="javascript:void(0)"
          [class.datatable-icon-right]="!expanded"
          [class.datatable-icon-down]="expanded"
          title="Expand/Collapse Row"
          (click)="toggleExpandRow(row)">
        </a>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Name" prop="name" editable="true"></ngx-datatable-column>
    <ngx-datatable-column name="Gender" prop="gender"></ngx-datatable-column>
    <ngx-datatable-column name="Age" prop="age"></ngx-datatable-column>
    <ngx-datatable-column name="Comment" prop="comment">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" 
      let-group="group" let-rowHeight="rowHeight">           
        <input autofocus
          (blur)="updateValue($event, 'comment', rowIndex)"
          type="text" 
          name="comment" 
          [value]="value"/>
      </ng-template>                
    </ngx-datatable-column>
  </ngx-datatable>

如何触发组行标头手动扩展ngx-datatable angular

1 个答案: