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

Question

我需要在悬停行时向左显示操作按钮。下面的参考资料有我需要的解决方案，但右边有操作按钮。我尝试更改 css 但仍然无效。有什么办法可以通过 CSS 实现这一目标。提前致谢

参考：

参考插件：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 并且将其固定到左侧不起作用的原因是“固定”属性影响了类名，而不是实际固定它向左，而是给它 ag-pinned-left-cols-container 的类名，这没有帮助。

一个简单的解决方法是在 css 文件中将 right 属性更改为 left，如下所示。这是 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;
}

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

Ag-Grid show buttons to the left on row hover

reactjs

ag-grid