ag-Grid - 是不是可以为每一行创建一个浮动菜单？

Posted 2023-03-28

【中文标题】ag-Grid - 是不是可以为每一行创建一个浮动菜单？

【英文标题】：ag-Grid - Is it possible to create a floating menu for each row?ag-Grid - 是否可以为每一行创建一个浮动菜单？

【发布时间】：2020-03-24 05:37:02

【问题描述】：

我正在尝试创建一个菜单，当用户将鼠标悬停在一行上时会出现，如下图所示。

我没有找到任何内置选项来实现这一点。还尝试使用自定义 CellRenderer 函数创建一个我以后可以移动的元素，但这并没有按预期工作，因为它提出了一些其他挑战（css 方面）并且没有真正实现目标。

有没有办法在 ag-Grid 中构建这种菜单？

【参考方案1】：

要解决此问题，您可以使用 onCellMouseOver 和 onCellMouseOut 方法：

var gridOptions = 
    columnDefs: columnDefs,
    onCellMouseOver : onCellMouseOver,
    onCellMouseOut:   onCellMouseOut,
    ...
;

定义两个函数：

var onCellMouseOver = function(event)
    //Get current row
    var rowIndex = event.node.rowIndex;
    var row = gridOptions.api.getDisplayedRowAtIndex(rowIndex);

    //Set current row as not selected - in order to base on 'cellStyle' function
    row.setSelected(true);

    //Setup refresh params
    var params = 
        force: true, //Force refresh as cell value didn't change
        rowNodes: [row]
    ;

    //Refresh current row cells
    gridOptions.api.refreshCells(params);

var onCellMouseOut = function(event)
    //Get current row
    var rowIndex = event.node.rowIndex;
    var row = gridOptions.api.getDisplayedRowAtIndex(rowIndex);

    //Set current row as not selected - in order to base on 'cellStyle' function
    row.setSelected(false);


    //Setup refresh params
    var params = 
        force: true, //Force refresh as cell value didn't change
        rowNodes: [row]
    ;

然后为你的列定义'cellStyle'函数：

var columnDefs = [
    headerName: "your_column_name", field: "your_column",
       cellStyle: function(params) ;
       console.log('Is row selected', params.node.selected);
            if (params.node.selected) 
                return display : 'none';
             else 
                return display : 'inherit';
            
        
    
];

您可以在此处找到有关数据刷新的更多信息：https://www.ag-grid.com/javascript-grid-refresh/

上面代码的完整实现可以在这里找到：Working example

第二个解决方案，在 cmets 之后编辑：

另一种方法是使用css类来实现结果。

   
      headerName: "Price",
      field: "price",
      cellStyle:  "text-align": "center" ,
      cellRenderer: function(params) 
        return (
          "<div class='buttons'>" +
          "<div class='back'>" +
          params.value +
          "</div>" +
          "<div class='front'><button>Option A</button><button>Option B</button></div>" +
          "</div>"
        );
      

基于.ag-row-hover ag-grid 类在悬停时显示按钮：

.front 
  display: none;

.ag-row-hover .front 
  display: inherit;

Working example

【讨论】：

谢谢卡米尔。这看起来和我需要的很相似，但不完全一样。按钮不必位于特定列上。或者换句话说，不会有 Actions 列，按钮应该出现在实际单元格内容的顶部（例如，在 Price 列的顶部）。

当您将操作按钮放置在行外时，您将无法利用“悬停”事件。这是你想要的吗？

不，实际上它与您之前显示的类似，但按钮不会在列内，只是浮动在行上（不会有唯一目的是按住按钮的列)。

@cfr - 请尝试“第二个解决方案，在 cmets 之后编辑”应该适合您 - 如果解决了问题，请提供反馈。

太棒了！这正是我所需要的！