带html的AG-GRID自定义标题

c9x0cxw0 于 2022-10-24 发布在 Angular

关注(0)|答案(6)|浏览(561)

我正试着使用农业网格来显示数据。我希望在标题列中包含HTML标记，但这似乎行不通。我以前有过使用UI-GRID的知识，但这个agGRID对我来说是新的，所以我不确定我错过了哪里。以下是我到目前为止一直在尝试的：

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

有谁能帮帮我吗。

angularjs

来源：https://stackoverflow.com/questions/43731875/ag-grid-custom-header-with-html

6条答案

按热度按时间

iaqfqrcu1#

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

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

赞(0）回复(0）举报 2022-10-24

nwlqm0z12#

我是AG-Grid的一名开发人员，希望我能在这方面帮助您。
使用Header模板可以很容易地实现这种行为，它允许对默认Header组件进行简单的用户界面定制。

//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元素的定制(上面突出显示)，这是列标题中的文本。要将值转换为超链接，我们只需将其 Package 在锚标记中。
以下是使用ANGLE：https://plnkr.co/edit/DVCbltCbbamkNqMo创建的演示
这是一个关于这个主题的博客(link to blog)，这是我们的文档中涵盖标题模板(文档链接)的页面

赞(0）回复(0）举报 2022-10-24

uajslkp63#

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

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

赞(0）回复(0）举报 2022-10-24

2jcobegt4#

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

赞(0）回复(0）举报 2022-10-24

jtjikinw5#

首先，请从文档中注意：
标题组件(如上所述)取代了标题呈现的需要。如果使用标头呈现，则应重构代码以改用标头组件。在ag-Grid v9中将不再支持页眉渲染。
这是在您计划升级到使用网格的最新功能的情况下。
现在回答你的问题..。从headerCellRendererFunc返回的内容对于每一列都是相同的，即一个空的h1标记。如果您这样做，它应该显示列名：

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

赞(0）回复(0）举报 2022-10-24

mzillmmw6#

只需将ColDef(ColumnDefs：ColGroupDef[]；)的HeaderName属性写为

headerName: 'You message' + '<some-html>Message to display</some-html>'

赞(0）回复(0）举报 2022-10-24

我来回答

带html的AG-GRID自定义标题

6条答案

相关问题

热门标签

最新问答