文章/答案/技术大牛

发布

社区首页 >问答首页 >带分组的角11垫桌分页

问带分组的角11垫桌分页
EN

Stack Overflow用户

提问于 2021-02-12 22:27:12

回答 1查看 1.4K关注 0票数 0

同时面临着MatTable分页和分组的有趣问题。事实上，我有两个带有Mat表的组件，其中我有Pagination+Grouping。

ComponentOne没有任何麻烦。如果我选择在一个页面中显示5个元素，它将按预期工作，分组标题将不会被计算在内。
当启用分组时，ComponentTwo在页面长度方面有问题。如果选择了5，那么每个分组头都被视为一个元素，所以最终，我可以有2个真实的数据元素+3个分组头。(见所附的截图)。

也许有一个param允许启用/禁用，考虑将头分组为实际MatTable的元素？或者，在一般情况下，这些元素的使用出现了一些问题。谢谢你的帮助！ComponentTwo的代码示例(它很大，所以我只取一部分)：

       <div *ngIf="!isSmall">   
        <mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)">
            
            ----- / data view / ---

            <!-- Table header -->
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

            <!-- Grouping -->
            <ng-container matColumnDef="groupHeader">
                <mat-cell *matCellDef="let group" [attr.colspan]="displayedColumns.length">
                    <b>{{group.value}}</b>
                </mat-cell>
            </ng-container>

            <!-- Table data -->
            <mat-row *matRowDef="let group; columns: displayedColumns;" class="group"
                [ngClass]="{'amber-300 selected': checkboxes[group.vk_id]}">
            </mat-row>
            <mat-row *matRowDef="let group; columns: ['groupHeader']; when: isGroup"></mat-row>
        </mat-table>

        <mat-paginator #paginator [pageSize]="tablePageSize" [length]="groupsCounter"
            [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="setPageSize($event)"></mat-paginator>
    </div>

打字本部分很简单：

this.dataSource = new MatTableDataSource(this.groups);
this.dataSource.paginator = this.paginator;

其余的组件代码是数据操作..。

javascript

html

angular

typescript

angular-material

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-13 10:12:35

我唯一能想到的就是覆盖_pageData方法，这个方法不是很好，但似乎很有效。看起来会是这样的：

this.dataSource = new MatTableDataSource(this.rows);
this.dataSource.paginator = this.paginator;
this.dataSource._pageData = (data: Row[]) => {
  const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
  // find start/end index with groups excluded
  const filter = data.filter(r => !r.isGroup).splice(startIndex, this.paginator.pageSize);
  const start = filter[0];
  const end = filter[filter.length - 1];
  // return all data between first and last item (including groups)
  return data.slice().splice(data.indexOf(start), data.indexOf(end));
}

受mat表源代码的启发。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66179851

复制

相似问题

问带分组的角11垫桌分页
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带分组的角11垫桌分页EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带分组的角11垫桌分页
EN