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

Posted 2021-04-08

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

我试图设置以下CSS，但它不起作用：

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

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

答案

使用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的中间

另一答案

这是Google搜索“在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;
    }

}