ag-grid 标题复选框选择所有行，即使是没有复选框的行

Question

我已经实现了一个网格，其中包含除最后一行之外的第一列带有复选框的行（即，最后一行没有任何复选框）。

const colDef = { 
        headerCheckboxSelection: this.forCheckbox,
        checkboxSelection: this.forCheckbox
 }

forCheckbox(params) {
    const displayedColumns = params.columnApi.getAllDisplayedColumns();
    if (params.node) {
        return (displayedColumns[0] === params.column  &&(params.node.data.myColNameValue !== '');
    }
    return (displayedColumns[0] === params.column);
}

所以myColNameValue 是'' 仅适用于最后一行。由于这种情况，网格的最后一行不会有复选框。但是，当我单击标题复选框时，它会检查并选择所有行以及最后一行，即使它没有复选框。

Answer 1

实现 isRowSelectable() 函数，对不想被选中的行返回 false

请看这里 - https://www.ag-grid.com/javascript-grid-selection/#selectable-rows-with-header-checkbox

在下面的代码（ag-grid Javascript）中，只有年份

constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Age",
        field: "age"
      },
      {
        headerName: "Country",
        field: "country",
        headerCheckboxSelection: true,
        checkboxSelection: true
      },
      {
        headerName: "Year",
        field: "year"
      },
      {
        headerName: "Date",
        field: "date"
      },
      {
        headerName: "Sport",
        field: "sport"
      },
      {
        headerName: "Gold",
        field: "gold"
      },
      {
        headerName: "Silver",
        field: "silver"
      },
      {
        headerName: "Bronze",
        field: "bronze"
      },
      {
        headerName: "Total",
        field: "total"
      }
    ];
    this.rowSelection = "multiple";
    this.isRowSelectable = function(rowNode) {
      return rowNode.data ? rowNode.data.year < 2007 : false;
    };
    this.defaultColDef = { width: 200 };
  }