如何将菜单按钮添加到 ag-Grid 行？

Posted 2023-03-28

【中文标题】如何将菜单按钮添加到 ag-Grid 行？

【英文标题】：How add menu button to ag-Grid row?

【发布时间】：2021-03-01 01:17:00

【问题描述】：

我正在使用 ag-Grid Enterprise Vue。

我在the docs 中看到了如何启用通过右键单击任何单个单元格 可用的“上下文菜单”。

我希望有一个特殊的专栏（右侧的pinned），它有一个按钮（可能看起来像⚙ 或...），可以在左侧打开一个菜单-点击。

我该如何启用它？我在文档中没有找到示例。

Ag-grid Cell containing menu button 是一个类似的问题，但没有答案。

【参考方案1】：

来自 this comment 在这个 ag-grid-enterprise 问题上，我能够 fork 示例，我认为它适用于我的情况。

相关代码为：

var gridOptions = 
    columnDefs: columnDefs,
    enableRangeSelection: true,
    getContextMenuItems: getContextMenuItems,
    allowContextMenuWithControlKey: true,
    onCellClicked: params => 
        console.log(params);
        if(params.column.colDef.field === '...')
            params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)
        
    ,
    onCellContextMenu: params => 
        params.api.contextMenuFactory.hideActiveMenu()
    
;

function getContextMenuItems(params) 
    console.log('getContextMenuItems', params);
    const node = params.node;
    console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);
    var result = [
        
            name: `Alert 'Row $node.rowIndex + 1'`,
            action: function() 
                window.alert(`Row $node.rowIndex + 1`);
            ,
            cssClasses: ['redFont', 'bold']
        ,
        'separator',
        
            name: 'Checked',
            checked: true,
            action: function() 
                console.log('Checked Selected');
            ,
            icon: '<img src="../images/skills/mac.png"/>'
        , 
        'copy' // built in copy item
    ];

    return result;