如何更改 ag-grid 行组缩进？

Posted 2023-03-28

【中文标题】如何更改 ag-grid 行组缩进？

【英文标题】：How to change ag-grid row group indent?

【发布时间】：2021-01-30 02:21:12

【问题描述】：

我想为我的Tree Data 中的每个内部组更改（增加/减少）缩进量（当前默认为28px）。但是，我在文档中找不到任何相同的配置选项。我能找到的最接近的东西是suppressPadding，它完全禁用了填充。我尝试使用 DOM 穿刺 CSS，但发现每个级别都有不同的 CSS 类（例如 ag-row-group-indent-2），这使得在我的容器组件中编写通用 CSS 规则变得困难。

【参考方案1】：

目前，我正在循环中覆盖样式，这似乎正在工作

// Taken from https://github.com/ag-grid/ag-grid/blob/master/dist/styles/ag-theme-base/sass/parts/_grid-layout.scss
// support 20 levels here because row group indentation is used for tree data which can be quite deep
@for $i from 1 to 20 
    .ag-row-group-indent-#$i 
        padding-left: $i * 8px;
    

    .ag-row-level-#$i .ag-row-group-leaf-indent 
        margin-left: 40px;
    

【参考方案2】：

您可以添加一个cellStyle 回调，根据其当前组级别计算每个单元格的padding-left 值。

defaultColDef: 
  cellStyle: (params) => 
    const  level  = params.node;
    const groupCell = params.value === params.node.key;
    const indent = 28; // change this value to your liking

    if (groupCell) 
      return 
        paddingLeft: (level + 1) * indent + "px"
      ;
    
  
,

如果您使用这种方法，请记住抑制来自 agGrid 的初始 css 填充值，或者同时抑制 agGrid 和您的填充值相加。

::ng-deep .ag-cell-wrapper.ag-row-group[class*="ag-row-group-indent"],
::ng-deep .ag-cell-wrapper.ag-row-group-leaf-indent[class*="ag-row-group-indent"] 
  padding-left: 0;

现场演示