javascript - 包含菜单按钮的 Ag-grid Cell

Question

我在我的项目中使用社区版的 ag-grid。我正在尝试在每一行的一个单元格中添加菜单按钮。单击菜单按钮时，应该会弹出菜单，其中包含编辑/删除/重命名选项，我需要在单击菜单上的任何项目时触发带有行值的事件。

我正在尝试创建一个将显示按钮的单元格渲染器。菜单最初将被隐藏，并且在单击按钮时，我正在使用 css 类更改显示。我看到 css 类已正确添加，但菜单仍然不可见。我检查了控制台，它隐藏在 table 后面。我在不同的地方使用了绝对位置和 z-index，但最终没有成功。

因为我使用的是社区版本，所以我无法使用开箱即用的上下文菜单或企业菜单。你能帮我吗？另外，有没有更好的方法来实现这个结果然后让我知道。非常感谢。

var students = [
    {value: 14, type: 'age'},
    {value: 'female', type: 'gender'},
    {value: "Happy", type: 'mood'},
    {value: 21, type: 'age'},
    {value: 'male', type: 'gender'},
    {value: "Sad", type: 'mood'}
];


var columnDefs = [
    {
        headerName: "Value",
        field: "value",
        width: 100
    },

    {headerName: "Type", field: "type", width: 100},
     {headerName: "Action", width: 100, cellRenderer: 'actionMenuRenderer' }
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: students,
    onGridReady: function (params) {
        params.api.sizeColumnsToFit();
    },
    components:{
      actionMenuRenderer: ActionMenuCellRenderer
    }
};
function ActionMenuCellRenderer() {
}

ActionMenuCellRenderer.prototype.init = function (params) {
    this.eGui = document.createElement('div')

    if (params.value !== "" || params.value !== undefined || params.value !== null) {
         this.eGui.classList.add('menu');
         this.eGui.innerHTML = this.getMenuMarkup();
         this.actionBtn =  this.eGui.querySelector(`.actionButton`);
           this.menuWrapper =  this.eGui.querySelector(`.menuWrapper`);
           this.actionBtn.addEventListener('click', event => this.onActionBtnClick(event));
    }
};

ActionMenuCellRenderer.prototype.getGui = function () {
    return this.eGui;
};

ActionMenuCellRenderer.prototype.onActionBtnClick = function() {
    alert('hey');
    this.menuWrapper.classList.toggle('showMenu');
}

ActionMenuCellRenderer.prototype.getMenuMarkup = function () {
        return `
            <button type="button" class="actionButton">
              menu
            </button>
            <div class="menuWrapper">
                <a class="menuItem">
                    Edit
                </a>
                <a class="menuItem">
                    Delete
                </a>
                <a class="menuItem">
                    Duplicate
                </a>
            </div>
        `;
}

我的 plnkr 示例- plnkr sample

Answer 1

问题是由于上下文菜单也在 ag-grid 单元格内呈现。所以无论你给它多少 z-index 都不能在 ag 网格的单元格渲染器 div 之外显示它。解决方案是我们可以使用像 Tippys 这样的库，它将在 ag-grid 主 div 之外呈现菜单，这将解决问题。下面是在 ag-grid 单元格渲染器中点击按钮显示菜单的示例代码。

ag-grid 也有一篇不错的博客。这是 reference link

import React, { useState, useEffect, useMemo, useRef } from "react";
import { AgGridReact } from "ag-grid-react";
import Tippy from "@tippyjs/react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";

function ActionsMenu(props) {
  const tippyRef = useRef();
  const [visible, setVisible] = useState(false);

  const show = () => setVisible(true);
  const hide = () => setVisible(false);

  const menu = (
    <div className="menu-container">
      <div className="menu-item" onClick={hide}>
        Create
      </div>
      <div className="menu-item" onClick={hide}>
        Edit
      </div>
      <div className="menu-item" onClick={hide}>
        Delete
      </div>
    </div>
  );
  return (
    <Tippy
      ref={tippyRef}
      content={menu}
      visible={visible}
      onClickOutside={hide}
      allowHTML={true}
      arrow={false}
      appendTo={document.body}
      interactive={true}
      placement="right"
      // moveTransition='transform 0.1s ease-out'
    >
      <button onClick={visible ? hide : show}>Actions</button>
    </Tippy>
  );
}

const frameworkComponents = {
  ActionsMenu: ActionsMenu,
};

export default function App() {
  const [rowData, setRowData] = useState([
    { make: "Ford", model: "Focus", price: 20000 },
    { make: "Toyota", model: "Celica", price: 40000 },
    { make: "BMW", model: "4 Series", price: 50000 },
  ]);

  const [columnDefs, setColumnDefs] = useState([
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "", cellRenderer: "ActionsMenu" },
  ]);

  const defaultColDef = useMemo(
    () => ({
      sortable: true,
      filter: true,
    }),
    []
  );
  useEffect(() => {
    fetch("https://www.ag-grid.com/example-assets/row-data.json")
      .then((result) => result.json())
      .then((r) => setRowData(r));
  }, []);
  return (
    <div className="ag-theme-alpine" style={{ height: 500, width: "100%" }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        frameworkComponents={frameworkComponents}
      />
    </div>
  );
}