Wie man einen "Zeilenkopf" im angularen UI-Raster macht

Question

Was ich in Angular-UI-Grid zu tun versuche, scheint ziemlich häufig, aber ich habe Probleme, etwas zu finden, das eine Lösung beschreibt.

Ich habe eine Tabelle. Wie viele Tabellen ist die erste Zeile wirklich ein "Zeilenkopf".

Was nun speziell meine ich damit:

1. Wie Spaltenüberschriften, die Werte sind immer gleich. Sie sind keine "Daten".
2. Wie Spaltenüberschriften werden sie anders formatiert als Nicht-Header-Datenzellen, um anzuzeigen, dass sie keine "Daten" sind.
3. Sie sollten nicht „Art“ der Lage sein, noch die Kopfzeile
4. Ideal für die Zeilenköpfe ist, die Spalte „Entfernen“ „eingefroren“, dass es nicht

nicht scrollen vielleicht ist es erwähnenswert, dass die Zeilenkopf Etikett aus den Daten kommen, wie in:

{ 
    rowHeader : "Fixed Rate", 
    TenYear: .02, 
    TwentyYear: .03 
}, 
{ 
    rowHeader : "Variable Rate", 
    TenYear: .04, 
    TwentyYear: .05 
} 

so etwas in dem obigen Beispiel ich suche, ist eine Tabelle, in der die erste Spalte Zeilenüberschriften von „Fixed Rate“ hat und " Variable Rate ". Das Styling dieser Spalte sollte eher wie eine Kopfzelle als eine Datenzelle aussehen.

Jetzt weiß ich, dass einige dieser Dinge wie "frezeing" und Ausschalten der Sortierung über columnDefs in gridOptions verfügbar sind. Aber was ich nicht weiß ist, ob es eine Möglichkeit gibt, einfach zu deklarieren, dass die erste Spalte eine Überschrift ist, und ich bekomme einfach all diese Dinge.

Dies scheint ein gängiges Tabellenparadigma zu sein.

Answer 1

Dies ist ziemlich einfach mit Row Header-Vorlage. Sie können Ihre eigene Vorlage wie unten

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); 

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
    $scope.columns = [{ field: 'TenYear' }, { field: 'TwentyYear' }]; 
var data = [{ 
    rowHeader : "Fixed Rate", 
    TenYear: .02, 
    TwentyYear: .03 
}, 
{ 
    rowHeader : "Variable Rate", 
    TenYear: .04, 
    TwentyYear: .05 
}] 
    $scope.gridOptions = { 
    data : data, 
    enableSorting: true, 
    columnDefs: $scope.columns, 
    onRegisterApi: function(gridApi) { 
     $scope.gridApi = gridApi; 
     var cellTemplate = 'ui-grid/selectionRowHeader'; // you could use your own template here 
     $scope.gridApi.core.addRowHeaderColumn({ name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['rowHeader']}}</div></div>"}); 
    } 
    }; 


}]); 

Arbeits plnkr http://plnkr.co/edit/9jZYgS3Ygaj2vhOnd2vh?p=preview

definieren