时间戳

首页 > 解决方案 > 如何触发组行标题手动扩展ngx-datatable angular

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

问题描述

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

我正在尝试动态分组行。

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

的初始值为groupBy假设“A”；

根据某些事件，我更改groupBy为“B”。

数据表本身不会更新记录。当我点击标题行时，它会更新记录。相反，它应该使用新的分组自动更新表记录。

是否有任何解决方案或可能有任何方法来模拟点击我的意思是手动展开/折叠标题行？

标签： angularngx-datatable

解决方案

看看下面的一个例子

工作演示

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

推荐阅读