包含菜單按鈕的 Ag-grid 單元格

Question

我在我的項目中使用社區版的 ag-grid。 我正在嘗試在每一行的一個單元格中添加菜單按鈕。 單擊菜單按鈕時，應該會彈出菜單，其中將具有編輯/刪除/重命名選項，並且當單擊菜單上的任何項目時，我需要使用行值觸發事件。

我正在嘗試創建一個顯示按鈕的單元格渲染器。 菜單最初將被隱藏，單擊按鈕時，我正在使用 css 類更改顯示。 我看到 css 類被正確添加，但菜單仍然不可見。 我檢查了控制台，它隱藏在桌子后面。 我在不同的地方使用了絕對位置和 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 樣本

Answer 1

問題是由於上下文菜單也呈現在 ag-grid 單元格內。 所以無論你給它多少z-index都不能在ag網格的單元格渲染器div之外顯示它。 解決方案是我們可以使用像 Tippys 這樣的庫，它將在 ag-grid 主 div 之外呈現菜單，這將解決問題。 以下是在 ag-grid 單元格渲染器中單擊按鈕時顯示菜單的示例代碼。

同樣的 ag-grid 也有不錯的博客。 這是參考鏈接

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>
  );
}