Question

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

Answer 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;
    }
}

Answer 2

使用Cell Renderer组件无法在扩展/折叠箭头之前添加图标，但是您可以利用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

自定义农业网格上的树形图标

2 个答案: