Ag-Grid 在行悬停时显示左侧的按钮

Question

我需要在行悬停时在左侧显示操作按钮。以下参考有我需要的解决方案，但右侧有操作按钮。我尝试更改 css，但仍然无法正常工作。 有什么方法可以通过 CSS 实现。提前致谢

参考：ag-Grid - show buttons on row hover like in Gmail

参考 Plunker：https://plnkr.co/edit/X4hCimLy6aL3j4eh?preview

这是我用的css

.ag-pinned-left-header,
.ag-horizontal-left-spacer {
  width: 0 !important;
  min-width: 0 !important;
}

/* Add absolute position so that action buttons column will appear on top of other columns. pointer-events: none to pass on mousemove event to behind columns */
.ag-pinned-left-cols-container {
  position: absolute !important;
  left: 0;
  pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-left-cols-container * {
  pointer-events: initial;
}

/* Hide border of left-cols-container */
.ag-pinned-left-cols-container .ag-cell {
  border: none !important;
}

/* Show action buttons only for row that is being hovered. For rows which are not being hovered, hide them by setting their width and padding to 0.*/
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
  width: 0 !important;
  padding: 0 !important;
}

Answer 1

我查看了plnkr，将其固定在左侧不起作用的原因是“固定”属性正在影响 className，实际上并未将其固定在左侧，而是将其固定在左侧ag-pinned-left-cols-container 的 className 没有帮助。

一个简单的解决方法是将right 属性更改为left，而不是在css 文件中，如下所示。这是 plnkr 中的第 23-27 行。确保您更改的是实际的 css 属性，而不是 className 中的 right

编辑：

经过大量调试后，我发现了代码的问题。 它不能与pinned: left 一起工作的原因是因为它被渲染为最左边的列，并且在它之后渲染的所有内容都将在堆栈中位于它的上方。所以在实践中，当它的位置设置为position: absolute !important 时，它仍然存在，就在其他列的后面。更改它的 z-index 将解决该问题。如果需要，您可以将 z-index 的值调整为更小的值。

更改 z-index 后，我能够同时显示左右操作按钮。您必须更改 ag-pinned-left-cols-container 中的 z-index

.ag-pinned-left-cols-container {
    position: absolute !important;
    left: 0;
    z-index: 10000000;
    pointer-events: none;
}