Ag 网格仅在组值之间放置边框

Posted

技术标签:

【中文标题】Ag 网格仅在组值之间放置边框【英文标题】:Ag grid to put border only between group values 【发布时间】:2020-12-02 22:48:27 【问题描述】:

附上我的 plunker 链接 [https://plnkr.co/edit/lnF09XtK3eDo1a5v]

我们是否可以选择在不同的组值之间设置边框..在这个例子中,国家是组,假设美国的行已经完成,我们可以得到底部边框来描绘组值的结尾

【问题讨论】:

【参考方案1】:

您可以使用rowClassRules 来确定哪些行应该具有特定样式。在您的情况下,您可能希望设置组中每一行的 border-top 的样式,减去表中的第一行。所以应该是

<AgGridReact
  ...
  rowClassRules=
    "first-row-in-group": (params) => 
        params.node.rowIndex !== 0 && params.node.firstChild
  
/>

在你的 css 文件中

/* style expanded row group */
.first-row-in-group,
/* style collapsed row group */
.ag-row-group-contracted 
  border-top: tomato solid 1px !important;

现场演示

【讨论】:

以上是关于Ag 网格仅在组值之间放置边框的主要内容,如果未能解决你的问题,请参考以下文章

将具有彩色边框的JPanel按特定顺序放置,使它们看起来像网格

HTML 表格:仅在表格标题上有边框,边框折叠:在表格上分开

在组中的第一个 btn 上引导 CSS 边框半径

如何仅在表格内应用边框?

如何更改 Ag Grid 边框颜色?

如何使用 agggrid 导出为 csv 功能为 excel 文件数据添加边框?