仅使用 Ag-grid 中标题上的复选框从当前页面中选择行

Posted 2023-03-28

【中文标题】仅使用 Ag-grid 中标题上的复选框从当前页面中选择行

【英文标题】：Only select rows from current page using checkbox on header in Ag-grid

【发布时间】：2020-04-05 11:29:31

【问题描述】：

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

【参考方案1】：

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

CustomHeader 将负责在网格中显示复选框 - 完整定义可在帖子末尾的示例中找到：

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

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

refreshHeader() 重绘标题。如果列名发生更改，或者其他会更改列标题的显示方式，则很有用。

  // 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

【讨论】：

感谢@kamil-kubicki，但能否请您提供 Angular 4 或 5 版本的解决方案

@Siddharth Vyas - 使用基于 Angular 5 的新示例更新了帖子 - 请注意，我不是 Angular 5 开发人员（可能会讨论代码的某些方面），但示例工作正常。

@kami-kubicki 非常感谢你拯救了我的一天

我发现建议的解决方案（isFirstColumn 实现）会显着降低滚动性能

您好 fedor，感谢您的反馈 - 刚刚更新并替换为 'return params.column.colId === "make";'避免对每一列进行嵌套的 getAllDisplayedColumns() 调用。

【参考方案2】：

简单的基于代码的解决方案，无需任何自定义组件：

将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);
    
;