javascript - 列选择 - AgGrid 社区

Question

我正在使用AgGrid带有React. 我试图在标题的每一列上显示一个复选框。选择时应突出显示所选列下的单元格。此外，我需要记录所选列的更改。

我columnDefs是基于后端数据构建的以下对象数组

{headerName: 'Name Of Header', headerCheckboxSelection: true, field: field }

输出

问题

下面是图片，当我单击任何列复选框时，它会做两件事

1. 选择其他列标题复选框
2. 选择所有行

而我需要执行以下操作

1. 仅标记用户选中的复选框

2. 仅突出显示该列下的列

3. 处理复选框选择事件

任何指针？

标签： javascriptreactjsag-gridag-grid-react

Answer 1

据我所知，没有用于列选择的API，与行选择相同，但您可以使用rangeSelection方法

这是一个界面：

interface AddCellRangeParams {
    // start row
    rowStartIndex?: number;
    rowStartPinned?: string; // either 'top', 'bottom' or undefined

    // end row
    rowEndIndex?: number;
    rowEndPinned?: string; // either 'top', 'bottom' or undefined

    // columns
    columnStart?: string | Column;
    columnEnd?: string | Column;
    columns?: (string | Column)[];
}

基于您的任务的可能场景

this.gridApi.addCellRange({
  rowStartIndex: 0,
  rowEndIndex: this.rowData.length-1,
  columnStart: "col_3",
  columnEnd: "col_3"
});

在职的Demo

PS不确定跟踪headerCheckboxSelection属性事件，但似乎您必须自己创建headerComponent和跟踪复选框事件（我想最好让一切都在您的控制之下）