在 ag-Grid 中,我想在悬停一行时显示操作按钮,就像在 Gmail 中一样。无论滚动位置如何,操作按钮都必须出现在网格的右端。
有提到一种方法https://blog.ag-grid.com/build-email-client-with-ag-grid-like-gmail/。他们在最后一列上使用了 cellRenderer,并在发生“onCellMouseOver”时在其中显示按钮。仅当最后一列(使用 cellRenderer)始终处于视图中时,此方法才有效。如果该列消失,操作按钮也将消失。
我无法使用这种方法,因为就我而言,有很多列,并且网格中的所有列不能同时显示在屏幕上。因此,根据滚动位置,右端可能有任何列,因此我们不知道要在哪一列上添加 cellRenderer。
![enter image description here](https://i.stack.imgur.com/kHNv8.png)
我们将如何实现这一目标?
这是一个演示我的解决方案的 plunk:https://plnkr.co/edit/X4hCimLy6aL3j4eh
事实证明,仅使用 CSS 就可以实现这一点。我是这样做的:
- 添加用于显示操作按钮的列。使用 cellRenderer 渲染其中的按钮。将其固定在右侧。
- Using CSS,
- 将 ag-pinned-right-cols-container 绝对位置向右
- 通过将宽度设置为 0 来隐藏右标题和间隔符
- 对于未悬停的行,通过设置其填充和宽度 0 来隐藏其中的操作按钮单元格
这是完整的 CSS 和解释:
/* Hide right header and spacer */
.ag-pinned-right-header,
.ag-horizontal-right-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 mouse events to behind columns */
.ag-pinned-right-cols-container {
position: absolute !important;
right: 0;
pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-right-cols-container * {
pointer-events: initial;
}
/* Hide border of right-cols-container */
.ag-pinned-right-cols-container .ag-cell {
border: none !important;
}
/* Show action buttons only for the row that is being hovered.
For rows which are not being hovered, hide them by setting their width and padding to 0. */
.ag-pinned-right-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-right-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
width: 0 !important;
padding: 0 !important;
}
Ag-grid 的默认行悬停和行选定颜色具有一定的透明度。由于我们的操作按钮列绝对放置在其他列之上,因此由于这些透明颜色的混合方式,其背景看起来更暗。
![enter image description here](https://i.stack.imgur.com/EvvMB.png)
因此,最好在此方法中使用不透明的背景颜色,如下所示:
.ag-theme-alpine {
--ag-row-hover-color: hsl(207, 90%, 94%);
--ag-selected-row-background-color: hsl(207, 87%, 86%);
}
Overall,
Pros:-
- 这是一个即插即用的解决方案。您只需将 CSS 放在代码中即可,您将获得悬停功能按钮。
- 这种方法与框架无关。我已经在 React 和 Angular 上测试过它。 (对于 Angular,您必须使用 ng-deep 来解决样式封装问题)
Cons:-
- 如果您已经将一列或多列固定在右侧,则此操作将不起作用
- ag-grid 的未来版本可能会使用不同的类名。因此,在升级 ag-grid 时可能需要更新此 CSS
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)