javascript - Ag-Grid - 如何为最后一行设置边框底部

Question

我正在将 Ag-Grid 与 React 结合使用，但我似乎无法弄清楚如何在最后一行之后显示边框底部。没有它，网格看起来不完整。请参阅附图。 Need the border bottom after the last row

我尝试设置以下 CSS，但它不起作用:

.ag-footer-cell-entire-row {
    border-bottom: solid 1px black !important;
}

在文档中，我还查看了 rowStyle 属性并尝试使用它，但我不知道如何确定当前行是否是最后一行。如果有人能指出正确的方向，我将不胜感激。

Answer 1

使用rowStyle 非常接近......您实际上需要使用getRowStyle，您需要根据docs 返回一个CSS 值对象。 .以下是您的函数的示例:

gridOptions = {
    ...
    getRowStyle: lastRowBorder
    ...
}

function lastRowBorder(params){
    if (params.node.rowIndex == params.api.rowModel.rowsToDisplay.length - 1){
        return {border-bottom: thick green}
    }
    else {
        return {}
    }
}

我相信这种比较 params.node.rowIndex == params.api.rowModel.rowsToDisplay.length - 1 在所有情况下都有效，但我自己还没有测试过。有一个 params.api.lastChild，但我不确定这是否仅适用于最后一行 node 还是适用于最后一个 node for groups...这就是你似乎在做的事情。在任何情况下，如果我提供的比较不起作用，console.log params 将是有益的。

---

作为旁注，在大多数情况下，尝试使用 css 选择器尝试到达最后一个 child 的路线并不是最干净的解决方案，因为 ag 网格依赖于绝对定位......这意味着最后一行在网格中可能在 DOM 的中间