我正在使用ngx-datable来呈现具有行分组的表。
我正在尝试对行进行动态分组。
<ngx-datatable
[groupExpansionDefault]="false" [groupRowsBy]="groupBy">
groupBy
的初始值为“ A”;
基于某些事件,我将groupBy
更改为“ B”。
数据表本身不更新记录。当我单击标题行时,它将更新记录。而是应使用新分组自动更新表记录。
有没有解决方案,或者有什么方法可以模拟点击,即手动扩展/折叠标题行?
答案 0 :(得分:0)
在下面查看一个示例
<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>