在 ag 网格上自定义树形图标答案

【问题标题】：Customize tree icon on ag grid在 ag 网格上自定义树形图标
【发布时间】：2021-01-24 11:35:49
【问题描述】：

我想在折叠和展开箭头之前的第一列中的 ag 网格中的树视图之前添加图标以及叶级别.. 我该如何为这个东西编写自定义渲染。

【问题讨论】：

你的问题不清楚。尝试添加一些 UI 和代码，或者尝试解释您的问题。

【解决方案1】：

您可以在树形视图的第一列中添加图标或按钮，如下所示：-

 autoGroupColumnDef: {
                headerName: 'OrgHierarchy',
                field: 'OrgHierarchy'
            //user valueGetter and valueSetter
                 valueGetter: (params) => {

                },
                valueSetter: (params) => {
                    return true;
                },
                cellRendererParams: {
                    suppressCount: true,
                    innerRenderer: 'orgHierarchyRenderer',  //<=====add it as
                },

}

components: {
  orgHierarchyRenderer: this.OrgHierarchyRenderer(),
}


 OrgHierarchyRenderer() {
        function orgHierarchyRenderer() {}
        orgHierarchyRenderer.prototype.init = function (params) {
            this.eGui = document.createElement('div');
            this.eGui.innerHTML = params.value;

            // add buttons or any icon as below and style to position
            this.btnEle = document.createElement('button');
            this.btnEle.className = 'btnDivDetails';
            this.btnEle.innerHTML = "Details <i class='kr-right_arrow'></i>";
            this.btnEle.addEventListener('click', function (event) {
                
                }
            
            });
            this.eGui.appendChild(this.btnEle);
        };

        orgHierarchyRenderer.prototype.getGui = function () {
            return this.eGui;
        };
        orgHierarchyRenderer.prototype.getValue = () => {
            return this.eGui;
        };
        orgHierarchyRenderer.prototype.destroy = function () {};
        orgHierarchyRenderer.prototype.isPopup = function () {
            return false;
        };
        return orgHierarchyRenderer;
    }
}

【讨论】：

知道如何将数据传递给渲染器吗？在某些情况下，我可以使用params.data 获取行数据，但在其他情况下，它除了params.value 之外没有任何其他内容，我无法使用它来区分它是什么类型的单元格。
对于分组节点，params.data 可能不会出现。您能否提出一个新问题并描述问题所在，以便更清楚。
我现在设法解决了我的问题，但我很快会添加一个新问题，因为我的用例更容易修复。基本上，我需要从行数据 (params.data) 中获取图标，但我们已经确定，在 Tree Grid 的情况下，params.data 并不总是有值，所以我无法获取图标，但随后我使用params.node.level 为我的 4 级数据显示不同的图标。正如您可以想象的那样，这是一个简单的场景，在复杂且深度依赖的需求的情况下无济于事。
添加上述评论后不久，我又想到了可能我的 rowData 配置不正确。令我惊讶的是，情况就是这样。所以，你看const rowData = [ { orgHierarchy: ['Erica'], jobTitle: "CEO", employmentType: "Permanent" }, { orgHierarchy: ['Erica', 'Malcolm'], jobTitle: "VP", employmentType: "Permanent" } ] 与const rowData = [ { orgHierarchy: ['Erica', 'Malcolm'], jobTitle: "VP", employmentType: "Permanent" } ] 不同

【解决方案2】：

使用单元格渲染器组件无法直接在展开/折叠箭头之前添加图标，但是您可以利用 CSS 来做到这一点。

例如，定位分组节点，然后添加一个图标（在本例中为 Font Awesome 图标）：

    .ag-theme-alpine span.ag-row-group::before {
      font-family: 'Font Awesome 5 Free';
      font-weight: bold;
      content: '\f00d';
      color: red;
    }

请参阅以下示例以了解如何操作：https://plnkr.co/edit/Dn5nIqzyaeOFld9q

【讨论】：