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

【问题标题】：Ag-Grid - How to Set Border Bottom for the Last RowAg-Grid - 如何为最后一行设置边框底部
【发布时间】：2017-10-12 03:32:30
【问题描述】：

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

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

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

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

【问题讨论】：

我会添加一些 CSS，例如 table tr:last-child {border-bottom:.....}
我刚试过这个，但似乎没有任何区别。不过感谢您的建议。
我可能错误地在 tr 而不是每个 td 上设置了边框，检查 this fiddle 的工作位置（使用 table tbody tr:last-child td 的 css 选择器）
@James，您发布的示例只使用了一个我知道如何应用边框底部的表格，但我的问题与link ag-grid 组件有关。就像我在问题中提到的那样，当包含 div 的高度大于网格的高度时，我似乎无法显示边框底部。
好的，同样的概念也应该适用，父的最后一个可以通过像 something whatever:last-child 这样的 css 选择器访问。奇怪的是，ag-grid 会使用表格以外的东西来呈现表格数据，我想我还有一些阅读要做。

标签： javascript css reactjs styles ag-grid

【解决方案1】：

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

}

【讨论】：

【解决方案2】：

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

【讨论】：

我必须修改与params.node.rowIndex === params.api.rowModel.rowsToDisplay.length - 1 的比较以使其工作。您能否编辑您的答案以反映此更正。 params.api.lastChild 在分组行的情况下不可靠，因为对于组的最后一个节点，它被设置为 true。感谢您的帮助！
@Linus DOH!，感谢您的关注。我已经更新了答案。
执行排序时这不起作用。