列选择 - AgGrid 社区

Question

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

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

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

输出

问题

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

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

而我需要做以下事情

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

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

3. 处理复选框选择事件

有什么建议吗？

Answer 1

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

here is an interface:

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

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