【问题标题】：Adding custom drodpdown on column Header in ag-Grid在 ag-Grid 中的列标题上添加自定义下拉菜单
【发布时间】：2021-01-11 12:19:12
【问题描述】：

我正在尝试在具有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}            
/>

【问题讨论】：

标签： reactjs ag-grid ag-grid-react

【解决方案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}
  {...}
/>

现场演示

【讨论】：

感谢@NearHuscarl。如上 UI 包含一个 input type='text' 作为下拉列表的一部分。我们能否将其添加为 UI 的一部分，以及与 columnsMenuTab 相同的复选框作为下拉列表的一部分。
不，除非您完全覆盖整个标题组件并从头开始编写自己的列菜单，否则您不能。我能想到的一种解决方法是打开一个带有输入字段的对话框，以在用户单击菜单时更新值。 @Mahi
好的。您能帮我实现 UI 部分并在该下拉 div 中获取相应的列标题 columnDef 和“gridApi”和“gridColumnApi”数据吗？
@Mahi 你能详细说明一下吗？我的答案中的列菜单已经可以显示您在gridOptions 中提供的所有colDef 属性。还是要显示所有 colDef 属性（包括您未指定的属性）？