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

Question

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

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

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

Answer 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