在 ag-grid 中对行进行分组答案

【问题标题】：Grouping Rows in ag-grid在 ag-grid 中对行进行分组
【发布时间】：2019-10-15 23:02:55
【问题描述】：

在我的表格中，我正在使用分组行，但我需要设置组的长度编号，在显示的示例中，组标签类似于“+Title grouo (3)”。我需要设置 '(3)' 的样式，例如放置一个引导标签。

我该如何设计它？

【问题讨论】：

【解决方案1】：

ag-grid 非常强大，并且有很好的自定义选项。我没有使用企业版，所以没有尽可能多地使用行分组选项来回答你的问题。然而，这是我发现的。

如果您决定为组本身设置一个特殊列，则可以使用cellRenderer。此单元格渲染器允许您根据需要自定义 html，并且是 Group 列的 columnDefs 的属性

或者，如果您选择让组使用整行而不为组设置单独的列，您可以使用groupRowRenderer or groupRowInnerRenderer callback which are attributes of the gridOptions。

Here 是 ag-Grid 提供的一个示例，它使用 groupRowInnerRenderer，似乎与您正在寻找的类似。

最后，如果您正在寻找最快和最简单的选项，您可以使用jQuery 或普通DOM lookups 来查找ag-group-child-count 类，这将为您提供一系列可以操作的span 元素您想要的正确引导样式

TL;DR

这样做：

document.getElementsByClassName("ag-group-child-count").add("bootstrap-label")

【讨论】：

您好，感谢您的回答，在我的情况下，我认为使用最快的方法会更好，但不幸的是我没有任何名为“ag-group-child-count”的类。
它不是你创建的类，它是在 ag-grid 初始化时创建的类。如果您查看开发人员工具中的元素，您应该会在那里看到类。我去了this example from ag-grid，打开了开发者控制台，找到了与你要找的号码相关联的类。我认为这是默认渲染器，但如果不是，您应该能够找到您的用例所需的正确类