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，您需要 return object of CSS每个 docs 的值。这是您的函数的示例：

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 选择器尝试到达 last-child 的路线在大多数情况下并不是最干净的解决方案，因为 ag 网格依赖于绝对定位...意味着网格中的最后一行可能位于 DOM

的中间

Answer 2

这是谷歌搜索 "Set bottom border in 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 - 如何为最后一行设置边框底部

Ag-Grid - How to Set Border Bottom for the Last Row

javascript

css

styles

reactjs