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

我是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列属性的template属性中，该属性位于我们选择的列的列定义中（在此示例中，我们选择运动者列）。我们专注于在此处自定义eText元素（上面已突出显示），这是列标题中的文本。要将值转换为超链接，我们只需将其包装在锚标记中即可。

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

这是一个涉及该主题（link to blog）的博客，这是我们文档中包含标头模板（link to the docs）的页面

Answer 2

首先，请注意docs：

标头组件（如上所述）取代了标头渲染的需要。如果使用标头呈现，则应重构代码以使用标头组件。将在ag-Grid v9中删除对标题呈现的支持。

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

现在回答您的问题...您从h1返回的内容对于每列都是相同的，一个空的return '<h1 column="headerColDef">' + headerColDef.name + '</h1>';标记。如果您这样做，它应该显示列名称：

{{1}}

Answer 3

在我的项目中，我做了类似的事情：

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

Answer 4

所以最后我发现，这可以很容易地完成，而不需要对标题进行任何特殊处理。只需定义标题的模板并使用。

了Exa。

public class ServiceFactory : IServiceFactory {
    public TServiceType CreateService<TServiceType>(string url)
        {
            Type t = typeof(TServiceType);

            if (t == typeof(IFirstService))
                return (TServiceType) CreateFirstServiceInstance(url);

            if (t == typeof(ISecondService))
                return (TServiceType) CreateSecondServiceInstance(url);

            throw new InvalidOperationException("Unsupported service type");
        }
}

然后定义columnDefs：

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

Answer 5

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

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

带有html

5 个答案: