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）中，只能选择年份为<2007的行。

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

ag-grid标头复选框选中所有行，即使没有该复选框的行

1 个答案: