如何更改ag-grid行组缩进？
ag-grid是一个用于构建功能强大的数据表格的JavaScript库。它提供了丰富的功能和灵活的配置选项，可以满足各种数据展示需求。
要更改ag-grid行组的缩进，可以通过设置gridOptions的indentSize属性来实现。indentSize属性指定了行组的缩进级别，默认为4个空格。
以下是一个完整的示例，演示如何更改ag-grid行组的缩进：
- 在HTML文件中引入ag-grid的脚本文件和样式文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css" />
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" />
</head>
<body>
<div id="myGrid" style="height: 500px;"></div>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<script>
// 在这里编写JavaScript代码
</script>
</body>
</html>- 在JavaScript代码中创建一个ag-grid实例，并配置相关选项。
var gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'country', rowGroup: true }
],
defaultColDef: {
flex: 1,
minWidth: 100,
resizable: true
},
autoGroupColumnDef: {
headerName: 'Group',
minWidth: 200,
cellRendererParams: {
suppressCount: true,
innerRenderer: function(params) {
return '<span style="padding-left: ' + (params.node.uiLevel * 20) + 'px">' + params.data.name + '</span>';
}
}
},
rowSelection: 'single',
groupSelectsChildren: true,
groupDefaultExpanded: -1
};
// 模拟的示例数据
var rowData = [
{ name: 'John', age: 25, country: 'USA' },
{ name: 'Jane', age: 30, country: 'USA' },
{ name: 'Bob', age: 35, country: 'UK' },
{ name: 'Alice', age: 40, country: 'UK' },
{ name: 'Michael', age: 45, country: 'USA' },
{ name: 'Mary', age: 50, country: 'UK' }
];
// 在页面加载完成后，创建ag-grid实例并加载数据
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
gridOptions.api.setRowData(rowData);
});在上面的代码中，我们使用了autoGroupColumnDef选项来定义了行组的渲染方式。cellRendererParams中的innerRenderer定义了行组标题的显示方式，通过动态设置padding-left样式来实现缩进效果。
通过调整params.node.uiLevel乘以缩进的像素值，可以实现不同级别的缩进效果。这里使用了20px作为缩进的像素值，可以根据需要进行调整。
这是一个使用ag-grid实现行组缩进的基本示例。关于ag-grid的更多功能和配置选项，请参考官方文档：ag-Grid Documentation。
相关·内容
1回答
我需要创建一个具有多列过滤器，行编辑和行选择功能的网格或表格。我是Angular JS的新手。我遇到了ng-grid，ag-grid，ui-grid和smart table。不确定其中哪些被广泛使用，并且在遇到问题时有更多的在线资源可用。ng-grid和ag-grid现在被ui-grid取代了吗？
浏览 2提问于2015-10-06得票数 2
我在这里发布这篇文章是因为今天这篇文章浪费了我相当多的时间。
我试图从我设置了aggrid的rowData属性的对象中的数据设置RowNode.id。这意味着，我想在我的数据模型上使用一个属性来提供ag-grid的行模型的内置id字段。他们在文档中提到了这一点，但他们没有解释如何做itp。
浏览 0提问于2018-03-23得票数 6
回答已采纳
2回答
我试图使角度ag-grid来获取网页的全部高度，所以如果我有一些组件，比如ag-grid的文本或标题，我想要使显示的网格获取页面的全部高度。
我看过关于堆栈溢出的问题：
然后我试着把这个应用于角ag-grid网格
下面是我应用的css，但它没有提供所需的结果：
body, html {
height: 100%;
margin:2px;
}
my-app .container {
display: flex;
flex-direction: column;
}
my-app .container .ag-grid-angular {
flex-basis: 100%
浏览 2提问于2018-05-14得票数 4
回答已采纳
我想在ag-grid中动态改变行的样式。我想要实现的是，如果我的ag-grid行已经被用户编辑过，那就改变该行的背景颜色。
cellValueChanged(event) {
//Add it only if the old value has changed
if (event.oldValue != event.newValue) {
// This will replace with latest edited value if it has been edited already
this.edittedRows[event.rowIndex.toStrin
浏览 6提问于2018-04-17得票数 1
回答已采纳
4回答
我初始化ag-grid，如下所示：
<ag-grid-ng2 [rowData]="records"></ag-grid-ng2>
将新项添加到记录数组后，ag-grid中的行将保持不更新。我必须打电话给setRowData(记录)。但是这是非常慢的，并且ag-grid会失去它的状态(就像聚焦单元一样)。
在rowData中更改数据时，有没有其他方法可以刷新ag-grid中的行。
浏览 1提问于2016-01-27得票数 4
3回答
我使用ag-grid来显示一个具有Row Grouping的表。我分组的列是不可见的，因为它的值没有任何意义。
因此，例如，我将有以下(完全折叠)表：
---------------------------------
| H1 H2 H3 |
----------------------------------
| > groupId1 (1) |
----------------------------------
| > groupId2 (5) |
---------
浏览 3提问于2019-02-03得票数 4
回答已采纳
1回答
是否可以使组行的单元格可编辑。下面是示例：
在上面的例子中，我们可以看到组行单元、供应商/数量是不可编辑的，并且只有叶节点单元是可编辑的。
ag-grid是否提供了一些网格选项来使组行可编辑？
浏览 0提问于2018-05-22得票数 6
1回答
我正在创建一个应用程序，它将有一个可编辑的表。我以前使用过Ag-Grid，并且发现它非常有用。我已经搜索和阅读了几个小时的文档，还没有找到下图的任何这样的例子。有没有可能在Ag-Grid中做这样的事情？ 我发现用于分组的唯一方法是将行隐藏在树状结构中。如果这是不可能的，有没有其他的角度表库可能会工作？ ?
浏览 17提问于2019-10-09得票数 0
回答已采纳
1回答
我正在使用AG-Grid进行反应，我想重命名使用聚合时自动出现的行标题计数。这张照片将帮助你更好地理解。
看看一行，上面写着"United“，然后是(1109)，这是匹配对的计数，我想从那里删除这个计数。有人能帮我吗。
浏览 15提问于2022-02-14得票数 0
回答已采纳
2回答
我正在使用ag-grid v23处理股票板块，并以大约100毫秒/条的高频更新数据。我正在使用batchUpdateRowData更新多个行。当我关注它的选项卡时，电路板通常会更新，但当我切换到其他选项卡并在一段时间后返回到主板选项卡时，它开始刷新从我不在主板选项卡到我回来时收到的所有更新的数据，它的性能非常糟糕。你知道这是如何发生的吗?如何解决？我试图升级到ag-grid v25，但问题仍然存在。
浏览 2提问于2021-06-01得票数 0
4回答
我想知道是否有一种方法可以在ag-grid中选择“分组”行。
例如，在网站上显示的示例中：
您可以将"rowSelection“参数设置为"single”，以便突出显示最低节点的整行。但是，这并不允许您突出显示"Country“行。
在本例中，执行此操作的唯一方法是“选择”该行下面的所有元素。
谢谢!
浏览 7提问于2015-10-04得票数 7
1回答
如果我将焦点放在除Ag-Grid Row之外的元素上，则Ag-Grid的键盘导航不起作用。 为了解决这个问题，我需要在执行按钮单击后重新聚焦到Ag-Grid行元素。 我尝试了以下方法来聚焦ag-grid行，但仍然不起作用。 this.elElement.nativeElement.querySelectorAll('.ag-row').attr('tabindex', -1).focus(); 在执行按钮单击后，我应该能够回到AG-Grid，以便在Ag-Grid中使用键盘导航
浏览 43提问于2019-05-08得票数 2
我正在尝试使用angular-grid (ag-grid)来显示一个树，如文档中提供的示例所示：
在给定的示例中，已经提供了所有数据。如何在展开行组时使用异步数据加载？我的猜测是我需要编写自己的组行渲染器。
浏览 17提问于2015-08-27得票数 6
我试图以下列方式更新ag-Grid行数据：
this.table.api.updateRowData({
update: [response.data]
})
更新工作正常，单元格获得更新后的值。但是，Ag没有重新评估行的类。此外，我还收到一条错误消息：
ag-Grid:找不到作为对象的数据项
这是我的rowClassRule：
rowClassRules: {
"row-disabled": function(params) {
if (params.data.status != 1) {
return true
浏览 5提问于2020-03-12得票数 2
将剪贴板/Excel数据粘贴到AG-Grid中时，如何将数据追加到当前行？
如果我的表当前只有一行，而我试图将10行粘贴到表中，那么Ag-Grid只会覆盖这一行，而不是附加额外的9行。我是否遗漏了一个gridOption，或者这是不可能的？
浏览 21提问于2017-07-20得票数 2
1回答
如何从ag-grid单元格模板触发一个angular js函数(ng-blur)？ 下面是我对ag-grid的列定义 var columnDefs = [
{headerName: "Make", field: "make" , template:'<input type="text" class="form-control control-width-90 margin-left-5" ng-blur="alert(\'wewew\')"/>'},
浏览 11提问于2020-09-28得票数 0
我是react/ Material - UI /ag-grid的新手，我希望使用ag-grid/react添加一个Material UI组件作为单元格编辑器(通过弹出窗口)。 我在我的组件文件中使用了以下标准行： export default withStyles(styles)(ControlledOpenSelect). 这产生了一个似乎破坏了ag的更高阶分量。我仔细阅读了有关使用高阶组件here的ag-grid的文档，但对如何以兼容的方式使用forwardRefs和withStyles函数与ag-grid感到有点困惑。举个例子会很有帮助。
浏览 5提问于2019-01-18得票数 0
我有一个使用角的<ag-grid>，我想要做的一件事是，当您单击一个按钮将一行添加到网格中时，我希望能够聚焦并开始编辑该行和该列的输入。
在文档中，通过使用如下代码，我已经能够在我的应用程序中的各种ag-grid中使用各种列：
this.gridApi.startEditingCell({
rowIndex: 0,
colKey: 'description'
});
然而，在我的网格中的一个特殊情况下，我使用树和autoGroupColumnDef，如下所示：
<ag-grid-angular
#agGrid
s
浏览 9提问于2020-04-19得票数 1
如何在ag-grid javascript中获取selectionChanged事件？我的意思是，当用户在ag-grid中检查checkbox时，我需要执行一些操作，所以我需要在jquery中获取一个事件。
浏览 4提问于2017-07-08得票数 1
1回答
我正试着从头开始构建一整张纸，并且在做的时候保持效率。为此目的，我试图依靠散装作业。
我可以构建一个庞大的行列表，并使用add_rows()轻松地添加它们。
但是，我需要一些行作为其他行的子行，而且row.indent和row.parent_id似乎都不可能在新行上设置(因为新行还没有id )。
我可以:创建父行> add_rows() > get_sheet() >查找工作表中的行id >创建子行> add_rows()，但我正在失去批量操作的好处。
在与smartsheet服务器通信之前，有没有任何方式在python中设置子/父关系？
另外，通过SDK (或其
浏览 0提问于2018-03-21得票数 1
回答已采纳
日安！ 我使用ag-grid在启用分页的“无限”行模型中显示长列表(具有多个页面)。用户可以跳转到另一页。在某一时刻，用户可以单击行来查看详细信息。当他按back时，我想恢复UI状态。我已经实现了对排序和过滤的恢复。但是找不到如何分页的方法。换句话说，我需要在创建ag-grid时指定当前页面。我在'onGridReady‘事件的处理程序中的'mounted’回调中调用了'paginationGoToPage‘方法。不走运。ag-grid总是从第一页开始。请指教
浏览 116提问于2021-06-29得票数 0
在我的ag-网格中，当我按列处理组时，我单击排序，组是按字母顺序排序的，即使是数字值。
是否有一种方法来提供依赖于组(行组)列类型的比较器？
以复制此问题: 1。在“朋克”中，请尝试按年龄行2分组。按组与asc或Desc排序3排序。组是按字母排序而不是按值排序(排序顺序为:15，16，17，18，19，20,200，21，22……)！
链接：
export class AppComponent {
private gridApi;
private gridColumnApi;
private columnDefs;
private de
浏览 0提问于2019-04-09得票数 3
1回答
我正在使用ag网格，列定义包含聚合行，如下所示。我想让export选项也导出聚合行。
我应该配置哪些参数来支持从网格导出聚合行？
this.gridApi.exportDataAsExcel(params) //<-------What param config to use
//Ag-Grid column Definitions
columnDefs: [
{
field: "athlete",
filter: "agTextColumnFilter",
minWidth:
浏览 15提问于2022-07-27得票数 0
我正在用ag-grid写一个angular项目，我想尝试一下行分组。下面是来自ag-grid网站的测试代码。但是，网格在调试窗口中显示常规网格和接收跟随。 ag-Grid: enableRowGroup仅在ag-Grid-Enterprise中有效，您的列定义不应包含enableRowGroup 有没有什么想法，如何使用ag-grid-enterprise的试用版？ 示例代码：https://www.ag-grid.com/javascript-grid-grouping/
浏览 69提问于2020-10-27得票数 0
概述
在以前的ag-grid版本<10.1.0中，可以在不刷新网格的情况下以这种方式添加一行：
let model: IRowModel = this.gridOptions.api.getModel();
const skipRefresh = true;
model.addItems( [ obj ], skipRefresh );
从ag-grid 10.1.0开始，addItems()方法就被弃用了，并且已经被完全移除。文档建议改用updateRowData()：
this.gridOptions.api.updateRowData( { add: [ obj ] } );
问
浏览 3提问于2017-12-18得票数 3
2回答
在Angular & Javascript中，我在其中一列中使用了带有checkboxSelection: true的Ag-Grid。 每当单击任何行的复选框时，我都需要调用一个函数...如何做到这一点？又一次，如何在Ag-Grid中选中复选框时调用函数？
浏览 70提问于2019-05-10得票数 4
回答已采纳
1回答
当使用ag-Grid提供的行特性时，将插入一个新的“row”作为组的标题，单击“展开/折叠area”来标识该组。
有什么方法可以访问这一行吗？
它不存在于填充网格的行数据中。
this.autoGroupColumnDef = {
field: "column",
headerName: " Column containing the expand / collapse rows ",
valueGetter: function nameGetter(params) {
console.log("A
浏览 1提问于2018-10-05得票数 0
回答已采纳
1回答
如何在ag-grid中获取行的DOM元素？ this.gridOptions.api.getRowNode(id) 这种方式可以获得一行的对象。但是如何获得这一行的DOM呢？
浏览 24提问于2019-02-28得票数 3
回答已采纳
我使用的是带有react的ag-grid企业版。启用透视模式时，我想禁用辅助组表头行。
是否有任何属性可以在ag-grid中禁用辅助组标题行。
浏览 3提问于2018-07-13得票数 2
我正在使用angular ag-grid来显示一些来自API的数据。我有一些值作为布尔值，我使用复选框来显示布尔值，如果值为真，我将显示复选框为选中，如果值为假，我将显示复选框为未选中。我的目标是在一行中只选中一个复选框时禁用复选框。我已经在这个链接下创建了一个演示。
在加载时，我可以这样做，但如果我要更改复选框的状态，我想要重新验证。有人能告诉我如何才能做到这一点吗？
浏览 22提问于2021-05-17得票数 1
可以在ag-grid中添加列吗？有一些默认选项(固定列、自动调整大小等)可用，我喜欢添加一个新列，这是基于现有的列。我喜欢显示输入列的bootstrap模型，而ag-grid不使用bootstrap，我不确定当用户单击标题行上的附加列菜单选项时，我如何显示模型表单。
浏览 13提问于2016-09-02得票数 0
回答已采纳
我使用的是Angular 4的ag-grid，我希望能够在运行时改变单个列标题的背景色。
似乎我必须在coldefs中使用headerComponentFramework属性，但我不知道如何使用它。有谁有主意吗？
向你致敬，亚历克斯
浏览 34提问于2017-05-11得票数 7
1回答
带有Redux的AG-Grid
、、、、
在我的工作中，我们决定在react变体中使用AG-Grid：
目前，我们的React架构是Redux。根据我对AG-Grid的一点了解，我可以说它不太适合这个体系结构。AG-Grid将它的总体状态保存在组件中。尝试将它与redux连接起来很麻烦，甚至不聪明。
我可以接受这种情况，但至少我需要观察行模型的更改--这意味着获取新的行、排序和筛选(我不需要监视单元格的更改)。我有两个想法，如何观察这一点，并将其连接到redux。
选项1-使用gridOptions.onModelUpdated()
使用gridOptions.onModelUpdated()，我知道何时执行筛选或排序，但不能访问显示
浏览 3提问于2016-07-22得票数 6
我有一个要求，能够显示，排序，编辑和添加新的行到一个表，以获取/存储它的数据在数据库中。
我已经考虑过在angular 2中使用ag-grid，并且我能够显示和排序没有问题。但是，我找不到任何用于添加新行的文档。ag-grid是添加/编辑数据的好选择吗？如果是这样，您如何处理添加新行？
其次，我听说过primeNG的好消息，但我已经在使用ng2-bootstrap组件了。两者都用是个坏主意吗？
浏览 10提问于2016-06-23得票数 1
1回答
Xcode提供了以下选项
Preferences > Text Editing > Indentation > Tab key
In leading white space：按Tab键只在一行开头或空格后面插入缩进。
Never：按Tab不会导致缩进。
Always：按Tab总是会导致缩进。
我检查了这些选项的文档(这就是冒号的右边)，但我仍然不明白。什么是“压痕”？我真正想要的是，如果Xcode的表现不像它比我知道的那么好，并且尝试重新处理已经完全缩进的代码行(我发现它经常在块内部这样做--我的代码嵌套的级别要比前面的行多一个级别，而且不管出于什么原因，
浏览 3提问于2014-01-27得票数 0
回答已采纳
我正在挑选一个网格在React应用程序中使用，以查看非常大的数据集，并具有过滤、分组和排序功能。所以，这必须是一个虚拟网格。根据这篇文章()，ag-Grid是现象级的。服务器端行模型似乎支持我们的“数据消息”需求。但是，我无法确认在这种模式下，ag-Grid是否支持来自服务器端的实时更新(数据推送)。你能告诉我正确的方向吗？如果你有一个文档链接或一个样本，那就更好了。谢谢
浏览 3提问于2020-12-19得票数 0
在Ag-Grid中显示详细信息行时，容器似乎有一个固定/计算的高度。我使用Ag-Grid documentation在Plunker上的例子复制了这个问题： 本页上的最后一个柱塞示例：https://www.ag-grid.com/javascript-grid-master-detail/ 为了复制它，在Plunker中，我单击了V形以打开子表以查看详细信息行，然后打开DevTools。我检查了子表周围的容器，发现它有一个类“ag-details”行，我添加了一个高度值，比如50%，但它只减少了行的高度。 ? 因此，我在子表中有大约2-3行。如何删除子表底部与其下父行之间的多余空格？
浏览 13提问于2019-02-22得票数 4
回答已采纳
ag-grid文档提供了两个功能树数据和数据更新：
但我不明白我该如何在树数据上执行数据更新
示例:我有以下javascript数据：
const tvSeries = [
{
season: "Season 1",
episodes: [
{episode: "s1e1"},
{episode: "s1e2"},
{episode: "s1e3"},
]
},
{
season: "Season 2",
浏览 1提问于2017-08-04得票数 1
回答已采纳
1回答
查看“折叠行”动画example ? 这和我想要实现的目标很相似。 我希望我的表能够响应，使用重新组织自身的方法，使其显示转置的每个原始行(但也转置标题并复制它们，以便它们标记每一行)。 ag-Grid看起来像是一个有无数功能的现象库，所以我很惊讶the docs似乎没有指定如何实现我的目标。
浏览 32提问于2020-11-18得票数 0
2回答
如何在updateRowData之后从ag-grid中删除空组。在plnkr示例中，我正在修改行的country值，我希望更改组名称，但却创建了一个新组。 修改国家名称代码： let toBeUpdate = [];
this.gridApi.forEachNode((rowNode, index) => {
if(rowNode.data && rowNode.data.athlete == 'Sadiq Khoja'){
var data = rowNode.data;
data.country = 'AAA Unkn
浏览 62提问于2021-01-07得票数 0
因此，在一些有用的输入之后，我想出了这段代码。这将在条件之后对数据进行排序。
现在，是否可以删除具有相同Name和相同Release的所有行(最后一行除外
Option Explicit
Sub Sortieren()
'
' Sortieren Makro
'
' Tastenkombination: Strg+q
'
ActiveWorkbook.Worksheets("ag-grid").ListObjects("Tabelle1").Sort.SortFields. _
Clear
浏览 2提问于2019-09-05得票数 0
我们如何避免对ag-grid的第一行进行排序？示例中，我在网格中有10行，我希望只有9行通过离开ag-grid的第一行进行排序？我已经尝试了所有可能的代码，并在谷歌上搜索了一些示例，但没有成功 <ag-grid-angular style="height: 453px;"
class="ag-theme-bootstrap"
border-color="#FFFFF"
[enableSorting]="true"
浏览 36提问于2020-06-16得票数 0
回答已采纳
2回答
我正在尝试删除ag-Grid中的一行，如下所示：
let alertRow : RowNode = this.gridApi.getRowNode(rowIndex);
console.log(alertRow);
this.gridApi.updateRowData({remove: [alertRow]});
它给了我这个错误：
ag-Grid:找不到作为对象的数据项
我可以在控制台中看到RowNode是正确的节点并存在。我也可以使用updateRowData()来添加新行，但是尝试删除会导致这个错误。
我在角6组件中使用ag-Grid .
为什么移除不起作用？
浏览 2提问于2018-10-04得票数 9
回答已采纳
1回答
我需要能够滚动到在reactjs ag-grid底部的最后一行，点击按钮。 我在下面尝试了一下，但它滚动到了网格顶部的第一行。 gridApi.ensureIndexVisible(gridApi.getDisplayedRowCount(), "bottom"); 我是不是漏掉了什么？ 谢谢。
浏览 13提问于2021-06-22得票数 0
回答已采纳
如何编写regex从堆栈下面提取行
我是新的正则表达式，并希望从下面的堆栈提取线条。以下是规则
在异常之后提取以'at‘开头的第一行
获取以com.test开头的第一行(该行可选，也可能不存在于整个文件中)
获取从com.test开始且与步骤2 com不类似的行。测试行包(此行可选在整个文件中，也可能不存在)
部分尝试向前看，但没有结果。
(Exception).*[\n\r]*.*at\s+(((?<pack>.*)(.*\.(?<packfunc>.*\..*)\())).*((?<Offset>:\d+))\)(((?=(\
浏览 0提问于2019-04-22得票数 1
回答已采纳
1回答
我使用的是Angular 7.x中的ag-grid。每当刷新页面时，它都会失去突出显示的行焦点。这似乎是ag-grid中的一个bug。
是否有解决方法，例如使用params ID将最后选定的行焦点设置回网格。
页面刷新前
页面刷新后
浏览 2提问于2019-07-05得票数 0
1回答
我目前在我的项目中使用了ag-grid。我正在尝试使用agrouping功能对数据进行分组。
在我的列定义中，我有这个：
{headerName: "Parent", field: "ParentID",width: 120,rowGroup:true},
{headerName: "Name", field: "Name"},
{headerName: "Level", field: "Level"},
{headerName: "Active", field: "Acti
浏览 2提问于2017-10-06得票数 0
我正在用angular 8在ag-grid上工作，我需要有一个像扩展任何主行一样的解决方案，现有的扩展行应该折叠。应该只有一个主详细信息行应该展开。该实现是否存在于Ag-grid中，或者是否需要实现任何自定义实现？有人能在这方面帮我吗？
浏览 316提问于2020-07-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
