在 generi-ui 网格的 Guipaging 块中显示复选框 angular

Question

我在 angular https://generic-ui.com/examples中使用下面的网格

下面是它在我的系统中的外观截图。

最后你可以看到一个带有 Show All 的 Checkbox。

我想在分页左侧的“搜索”选项下显示该复选框。

您可以在屏幕截图中看到详细信息，下面是我的代码。 在代码中，您可以从我显示分页的位置看到 html 和 ts 文件。 但我不知道如何在分页左侧显示此复选框。

html 文件

 <gui-grid [source]="source"
      [columns]="columns"
      [maxHeight]="500"
      [loading]="loading"
      [paging]="paging"
      [sorting]="sorting"
      [searching]="searching"
      [titlePanel]="titlePanel"> 
    </gui-grid>

 <mat-checkbox (change)="showAllUsers()">
      Show All
    </mat-checkbox>

文件：

通过这种方式获取数据：

columns: Array<GuiColumn> = [
    {
      header: 'Name',
      field: 'name',
      width: 140
    },
    {
      header: 'Type',
      field: 'type',
      width: 140
    }];

我正在从 API 获取数据并将源设置为该数据。

我使用此代码显示的分页：

paging: GuiPaging = {
    enabled: true,
    page: 1,
    pageSize: 10,
    pageSizes: [10, 25, 50],
    pagerTop: true,
    pagerBottom: true,
    display: GuiPagingDisplay.ADVANCED
  };

Answer 1

您可以尝试使用一些 CSS 只是在下面给出一些想法..

您可以应用到复选框。您需要使其响应，以便它适用于您的所有设备。

style="position: absolute; margin-top: -166px; margin-left: 24px;"