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

Question

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

Answer 1

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

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

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

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

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;
  }

AngularJs 工作示例

工作示例 Angular5