reactjs - 在 ag-Grid 中的列标题上添加自定义下拉菜单

Question

我正在尝试在具有的列标题上创建一个自定义UI elements as below (containing some input type text and buttons and unordered list)下拉列表，并且此下拉列表应将其中的列定义列表作为列表获取。有没有办法实现这一点，在 ag-Grid 的列标题上创建自定义下拉 div。单击时如何在列标题上获得单击事件？

https://www.ag-grid.com/javascript-grid-column-menu/

这是plunker链接： -

https://plnkr.co/edit/hztm3jf5FDBK2unX

.jsx:-

<AgGridReact
  columnDefs={this.state.columnDefs}
  defaultColDef={this.state.defaultColDef}
  rowData={this.state.rowData}
  // frameworkComponents={this.state.frameworkComponents}
  onGridReady={this.onGridReady}            
/>

标签： reactjsag-gridag-grid-react

Answer 1

您可以使用getMainMenuItems回调来自定义列菜单内容。下面的示例演示了如何在generalMenuTab. 您还可以使用此处更新某些列设置的值GridApi.setColumnDefs()并立即查看结果。

getMainMenuItems = (params: GetMainMenuItemsParams) => {
  const { api, columnApi } = params;
  const menuItems = [] as MenuItemDef[];
  const colDef = params.column.getColDef();
  const userProvidedColDefKeys = Object.keys(colDef);

  userProvidedColDefKeys.forEach((key) => {
    const value = colDef[key];
    const menuItem: MenuItemDef = { name: key };
    const updateColDef = (key: string, value: any) => {
      const colDefs = api?.getColumnDefs();
      const newColDefs = colDefs?.map((c) => {
        const newColDef = {};

        Object.keys(c).forEach((key) => {
          if (userProvidedColDefKeys.includes(key)) {
            newColDef[key] = c[key];
          }
        });
        if (c.field === colDef.field) {
          newColDef[key] = value;
        }
        return newColDef;
      });
      api?.setColumnDefs(newColDefs);
    };

    if (typeof value === "boolean") {
      menuItem.subMenu = [
        {
          name: "Yes",
          checked: value,
          action: () => updateColDef(key, true)
        },
        {
          name: "No",
          checked: !value,
          action: () => updateColDef(key, false)
        }
      ];
    } else if (typeof value === "number") {
      if (key === "flex") {
        menuItem.subMenu = [0, 1, 2, 3, 4].map((flex) => ({
          name: flex.toString(),
          checked: flex === value,
          action: () => updateColDef(key, flex)
        }));
      } else if (
        key === "width" ||
        key === "minWidth" ||
        key === "maxWidth"
      ) {
        menuItem.subMenu = [50, 100, 200, 300, 500].map((width) => ({
          name: width.toString(),
          checked: width === value,
          action: () => updateColDef(key, width)
        }));
      }
    }

    menuItems.push(menuItem);
  });

  return menuItems;
};

用法

<AgGridReact
  getMainMenuItems={this.getMainMenuItems}
  {...}
/>

现场演示