在Angular Generic-UI Grid分页区左侧添加Show All复选框

要将"Show All"复选框移至Generic-UI Grid分页区域左侧的搜索选项下方，你需要利用Grid的自定义分页模板功能，具体步骤如下：

1. 修改HTML结构 #

将原来独立的mat-checkbox移入<gui-grid>标签内部，通过Generic-UI提供的分页模板指令指定放置位置。这里使用guiPagerTopLeft指令将复选框插入顶部分页区域的左侧（对应搜索框下方的位置）：

<gui-grid [source]="source"
          [columns]="columns"
          [maxHeight]="500"
          [loading]="loading"
          [paging]="paging"
          [sorting]="sorting"
          [searching]="searching"
          [titlePanel]="titlePanel">
  <!-- 自定义顶部分页左侧区域 -->
  <ng-template guiPagerTopLeft>
    <mat-checkbox (change)="showAllUsers($event)">
      Show All
    </mat-checkbox>
  </ng-template>
</gui-grid>

2. 完善showAllUsers逻辑 #

在TS文件中，根据复选框的状态切换分页的启用状态或调整分页参数：

showAllUsers(event: MatCheckboxChange): void {
  if (event.checked) {
    // 勾选时禁用分页，直接显示全部数据
    this.paging = {
      ...this.paging,
      enabled: false
    };
    // 可选：若需保留分页控件但显示全部数据，可设置pageSize为数据源总长度
    // this.paging.pageSize = this.source.length;
  } else {
    // 取消勾选时恢复原有分页配置
    this.paging = {
      ...this.paging,
      enabled: true,
      pageSize: 10 // 恢复默认每页数量
    };
  }
}

关键说明 #

• Generic-UI Grid提供了多个分页模板指令，比如guiPagerTopLeft、guiPagerTopRight、guiPagerBottomLeft等，可根据需求选择对应位置插入自定义内容。
• 修改paging对象时需用不可变更新（如扩展运算符...），确保Grid能检测到配置变化并更新视图。

内容的提问来源于stack exchange，提问作者Vasi