Question

我正在使用带有React的Ag-Grid，我似乎无法弄清楚如何在最后一行之后显示边框底部。没有它，网格看起来不完整。请参见附图。 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组是否属实...这就是你看起来的样子要做。在任何情况下，如果我提供的比较不起作用，console.log params将会有所帮助。

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

Answer 2

这是在谷歌搜索“在agGrid中设置底部边框”时的最高结果。我遇到的问题是，在网格主体上应用边框不会在网格底部绘制边框（例如，无论人行如何出现，我都希望网格本身始终具有边框）。经过一番修补，这是我的解决方法

.grid-container {
    height: 70%;
    margin: 10px 20px 0 20px;

    .ag-header {
        border: 1px solid black;
        border-bottom: none;
    }

    .ag-body {
        background-color: #fdfdfd;
        border-bottom: 1px solid black;
    }

    .ag-body-viewport-wrapper {
        border: 1px solid black;
        border-top: none;
    }

    .ag-body-viewport {
        border-bottom: 1px solid black;
    }

}

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

2 个答案: