当前页面只有 select 行使用 Ag-grid 中 header 上的复选框

Question

我面临一个与 Ag-grid 相关的问题，当我们选中 header 的复选框时，它们 select 所有总记录（所有分页页面）我只想select 当前页面数据，例如：我在第 1 页有 10 条记录，那么它们应该 select 在网格中只有 10 条记录。

Answer 1

为您的问题创建解决方案我选择了自定义组件，这将有助于定义要在列定义级别使用的自定义 header 渲染器。

CustomHeader 将负责网格中的复选框显示 - post:

末尾的示例中提供了完整定义

  CustomHeader.prototype.init = function(params) { ... }

复选框显示在第一列（使用 isFirstColumn 函数）并将在每次分页更改时刷新或复选框选择 (onPaginationChanged onSelectionChanged)。这是强制性的，因为只有在所有行都被选中时才需要检查元素。

refreshHeader() Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed.

  // grid definition
  $scope.gridOptions = {
    ...
    defaultColDef: {
      sortable: true,
      filter: true,
      resize: true,
      checkboxSelection: isFirstColumn
    },
    onPaginationChanged: onPaginationChanged,
    onSelectionChanged: onSelectionChanged
  };

  // events handlers
  function onSelectionChanged(event) {
    this.api.refreshHeader();
  }

  function onPaginationChanged(event) {
    this.api.refreshHeader();
  }

  function isFirstColumn(params) {

    return params.column.colId === "make";

    //Previous implementation with detecting
    //first column but slows down the grid
    //var displayedColumns = params.columnApi.getAllDisplayedColumns();
    //var thisIsFirstColumn = displayedColumns[0] === params.column;
    //return thisIsFirstColumn;
  }

Working example AngularJs

Working example Angular5

Answer 2

不需要任何自定义组件的简单 code-based 解决方案：

将 paginationChanged 事件侦听器附加到 onGridReady 网格事件：

onGridReady = (params) =>
{
    this.gridApi.addEventListener('paginationChanged', (e) =>
        {
            //Reset rows selection based on current page
            this.resetPaginationSelection(this);
        });
};

用于处理当前页面中可选行的事件处理程序方法：

resetPaginationSelection = (self) =>
{
    //Deselect previously selected rows to reset selection
    self.gridApi.deselectAll();

    //Initialize pagination data
    let paginationSize = self.gridApi.paginationGetPageSize();
    let currentPageNum = self.gridApi.paginationGetCurrentPage();
    let totalRowsCount = self.gridApi.getDisplayedRowCount();

    //Calculate current page row indexes
    let currentPageRowStartIndex = (currentPageNum * paginationSize);
    let currentPageRowLastIndex = (currentPageRowStartIndex + paginationSize);
    if(currentPageRowLastIndex > totalRowsCount) currentPageRowLastIndex = (totalRowsCount);

    for(let i = 0; i < totalRowsCount; i++)
    {
        //Set isRowSelectable=true attribute for current page rows, and false for other page rows
        let isWithinCurrentPage = (i >= currentPageRowStartIndex && i < currentPageRowLastIndex);
        self.gridApi.getDisplayedRowAtIndex(i).setRowSelectable(isWithinCurrentPage);
    }
};

当前页面只有 select 行使用 Ag-grid 中 header 上的复选框

Only select rows from current page using checkbox on header in Ag-grid

ag-grid

ag-grid-angular