带有 html 的 ag-grid 自定义标题

Question

我正在尝试使用 ag-grid 来显示数据。 我想在 Header 列中有 HTML 标签，但这似乎不起作用。我以前有使用 ui-grid 的知识，但是这个 ag-grid 对我来说是新的，所以不确定我在哪里失踪。 这是我到目前为止所尝试的：

var columnDefs = [
                   {headerName: "Workload", field: "workload"},
                   {headerName: "units", "field": "units"}
                 ];

网格选项：

$scope.gridOptionsObject = {
                            columnDefs: columnDefs,
                            rowData: $scope.rowData,
                            headerCellRenderer: (params) =>
                                {return headerCellRendererFunc(params)}
                        };

// 标题单元格渲染函数：

        var headerCellRendererFunc = function(params) {
            var headerColDef = params.colDef;
            headerColDef.name =  headerColDef.headerName;
            headerColDef.isMetadata = false;
            return '<h1 column="headerColDef"></h1>';
        }

谁能帮帮我。

Answer 1

首先你可以创建一个组件。 然后将该组件初始化为 columnDefs 的 headerComponentFramework 的属性。

this.gridOptions.columnDefs = [
      {
        headerComponentFramework: StylingHeaderComponent,
        filter: 'agTextColumnFilter',
        field: 'name',
        cellRendererFramework: StylingsNameComponent,
      },
    ];

Answer 2

我是 ag-Grid 的一名开发人员，希望能在这方面为您提供帮助。

使用标题模板很容易实现此行为，该模板允许对默认标题组件进行简单的 UI 自定义。

//Athlete column definition
  {
        minWidth: 150,
        field: 'athlete',
        headerComponentParams: {
            template:
                '<div class="ag-cell-label-container" role="presentation">' +
            '  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
            '  <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
            '    <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' +
            '    <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
            '    <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
            '    <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +

            //The line below is the key for achieving the solution
            '    <a href="https://ag-grid.com" target="_blank"> <span ref="eText" class="ag-header-cell-text" role="columnheader"></span></a>' +

            '    <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
            '  </div>' +
            '</div>'
        },
}

要使用标题模板，我们将其添加到 headerComponentParams 列属性的模板属性中，在我们选择的列的列定义中（我们在本示例中选择了运动员列）。我们专注于在此处自定义 eText 元素（上面突出显示），这是列标题中的文本。要将值转换为超链接，我们只需将其包装在锚标记中。

这是一个使用 Angular 创建的演示：https://plnkr.co/edit/DVCbltCbbamkNqMo

这是一个涵盖此主题的博客 (link to blog)，这是我们文档中涵盖标题模板的页面 (link to the docs)

Answer 3

在我的项目中，我做了这样的事情：

headerCellTemplate = function () {
                    var eCell = document.createElement('span');
                    eCell.innerHTML = '<div></div>'
                    return eCell;
                };

Answer 4

*更新：这仅适用于旧版本的 AgGrid（v18 和可能的一些较新版本，但绝对不适用于 v22.1.1）*

---

所以我终于找到了解决方案。这可以很容易地完成，无需对标头进行任何特殊处理。只需定义标题的模板并使用即可。

var header_template = '<span class="text-danger" style="height:30px;">Some Value </span>';

然后定义columnDefs：

columnDefs = [];
customColumn = {headerName: header_template, field: name};
columnDefs.push(customColumn);

Answer 5

首先请注意来自docs：

页眉组件（如上文所述）取代了对页眉渲染的需求。如果使用标题渲染，您应该重构代码以使用标题组件。在 ag-Grid v9 中将放弃对标题渲染的支持。

如果您打算升级到使用网格的最新功能的话。

---

现在回答您的问题...您从headerCellRendererFunc 返回的内容对于每一列都是相同的，即空的h1 标记。如果您这样做，它应该显示列名：

return '<h1 column="headerColDef">' + headerColDef.name + '</h1>';