javascript - 列选择 - 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并自己跟踪复选框事件(我认为最好让一切都在您的控制之下)