ag-Grid benutzerdefinierte Header mit HTML

Question

Ich versuche Ag-Grid zu verwenden, um die Daten anzuzeigen. Ich möchte HTML-Tags in der Header-Spalte haben, aber das scheint nicht zu funktionieren. Ich habe Vorkenntnisse mit UI-Grid arbeiten, aber diese Ag-Grid ist neu für mich, also nicht sicher, wo ich vermisse. Hier ist, was ich versucht habe, bis jetzt:

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

Rasteroptionen:

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

// Header CellRenderers Funktion:

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

Kann mir jemand hier helfen.

Answer 1

So endlich fand ich, dass, kann dies leicht ohne besondere Behandlung durchgeführt werden für den Header. Definieren Sie einfach die Vorlage für die Kopfzeile und verwenden Sie sie.

Exa.

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

und dann definieren columnDefs:

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

Answer 2

Zuerst beachten Sie bitte aus dem docs:

Kopf Komponenten (oben erläutert) enthebt den Header-Rendering. Wenn Sie das Header-Rendering verwenden, sollten Sie Ihren Code neu strukturieren, um stattdessen Header-Komponenten zu verwenden. Unterstützung für Header-Rendering wird in ag-Grid v9 fallengelassen.

Das ist, wenn Sie ein Upgrade auf die neuesten Funktionen des Rasters planen.

---

Jetzt Ihre Frage zu beantworten ... was Sie von Ihrem headerCellRendererFunc kehren die gleichen für jede Spalte sein wird, ein leerer h1 Tag. Es sollte die Spaltennamen angezeigt werden, wenn Sie diese stattdessen tun:

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

Answer 3

In meinem Projekt, das ich so etwas wie dies tat:

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