ag-grid 自定义 header 和 html

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

// Header 单元格渲染函数：

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

谁能帮帮我。

Answer 1

首先请注意docs:

Header components (explained above) replace the need for header rendering. If using header rendering, you should refactor your code to use header components instead. Support for header rendering will be dropped in ag-Grid v9.

如果您打算升级到使用网格的最新功能，那就是这样。

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

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

Answer 2

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

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

Answer 3

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

所以我终于找到了解决办法。这可以轻松完成，无需对 header 进行任何特殊处理。只需为 header 定义模板并使用。

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 4

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

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

Answer 5

我是 ag-Grid 的一名开发人员，希望我能够帮助您解决这个问题。

使用 header 模板可以很容易地实现此行为，该模板允许对默认 header 组件进行简单的 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>'
        },
}

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

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

这是一篇涵盖该主题的博客 (link to blog) and here is the page in our docs which covers header templates (link to the docs)

ag-grid 自定义 header 和 html

ag-grid custom header with html

angularjs

ag-grid