AG Grid，点击人字形捕捉事件

Question

Ag-grid 为单击单元格时提供 onCellClicked 事件。但我注意到当我们点击人字形时它不会触发。我需要捕获此事件以进行分析，因为用户可能会直接单击人字形而不是单元格本身。知道如何实现这个或在这里使用什么事件吗？如果有帮助，我正在使用 detailRenderer 呈现子行。这是 columnDefs 项目之一：

{
      headerName: "Line Item",
      field: "displayLineNumber",
      width: "100px",
      sortable: false,
      expandable: true,
      onCellClicked: (event) => {
        event.node.setExpanded(!event.node.expanded);
        if (event.node.expanded === true) {
          DataLayerUtils.pushEvent(
            "click",
            {
              name: "Open Line Item",
              type: "button",
            },
            {
              click: {
                category: "Quote Detail Table Interactions",
              },
            }
          );
        } else {
          DataLayerUtils.pushEvent(
            "click",
            {
              name: "Collapse Line Item",
              type: "button",
            },
            {
              click: {
                category: "Quote Detail Table Interactions",
              },
            }
          );
        }
      },
      rowClass: ({ node, data }) => {
        return `cmp-product-lines-grid__row ${
          !data?.children || data.children.length === 0
            ? "cmp-product-lines-grid__row--notExpandable"
            : ""
        }`;
      },
      detailRenderer: ({ data }) => (
        <section className="cmp-product-lines-grid__row cmp-product-lines-grid__row--expanded">
          <ProductLinesChildGrid
            gridProps={gridProps}
            license={gridProps.agGridLicenseKey}
            columnDefiniton={
              whiteLabelMode ? whiteLabelCols() : quoteDetailsCols()
            }
            data={data.children}
            onModelUpdateFinished={() => {
              markupChanged(mutableGridData);
            }}
          />
        </section>
      ),
    },

Answer 1

有两种方法可以实现：

实施网格事件rowGroupOpened（参见：https://www.ag-grid.com/react-data-grid/grid-events/#reference-rowGrouping-rowGroupOpened）

每当用户打开组节点时都会触发此事件。

onRowGroupOpened={(params) =>
  console.log('onRowGroupOpened', params.expanded)
}

实施网格事件 cellMouseDown（参见：https://www.ag-grid.com/react-data-grid/grid-events/#reference-selection-cellMouseDown）以捕获人字形点击事件。

仅当用户单击展开 V 形时才会触发此事件

onCellMouseDown={(params) => {
  const isMasterRowGroupExpanded = params.event.target.classList.contains(
                'ag-icon-tree-closed'
              );
  if (isMasterRowGroupExpanded) {
    console.log('onCellMouseDown', params.value);
  }
}}

查看 following plunkr 中实现的这两种方法。

AG Grid，点击人字形捕捉事件

AG Grid, Capture the event on click of chevron

reactjs

ag-grid

ag-grid-react