Как вызвать расширение заголовка группы строк вручную ngx-datatable angular - PullRequest
Новая
       24

Как вызвать расширение заголовка группы строк вручную ngx-datatable angular

0 голосов
/ 12 июня 2019

Я использую ngx-datable для рендеринга таблицы с группировкой строк.

Я пытаюсь группировать строки динамически. 

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

Начальное значение groupBy предполагается, что "A";

На основании какого-либо события я изменяю groupBy на "B".

Сам набор данных не обновляет записи.И когда я нажимаю на строку заголовка, она обновляет записи.Скорее он должен автоматически обновлять записи таблицы с новой группировкой.

Есть ли какое-либо решение для этого или может быть какой-либо способ имитировать щелчок, который я имею в виду, вручную расширяя / сворачивая строку заголовка?

1 Ответ

0 голосов
/ 12 июня 2019

Ознакомьтесь с одним примером ниже

Рабочая демонстрация 

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