在 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;"