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

Posted 2023-02-18

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

【英文标题】：Adding custom drodpdown on column Header in 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            
/>

【参考方案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 属性（包括您未指定的属性）？