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

第二个解决方案，在评论后进行了编辑：

另一种方法是使用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

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

1 个答案: