带有 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

这是一篇涵盖此主题的博客（博客链接），这是我们文档中包含标题模板的页面（文档链接）

Answer 3

*更新：这只适用于旧版本的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);