Angular ui-gridで「行ヘッダー」を実行する方法

Question

Angular ui-gridで実行しようとしているのはかなり一般的ですが、解決策を説明するものは何も見つかりません。

私はテーブルを持っています。多くの表のように、最初の行は実際には「行ヘッダー」です。

は今、特に私が何を意味する：

1. 列ヘッダと同様に、値は常に同じです。それらは「データ」ではありません
2. 列ヘッダーと同様に、それらは非ヘッダーデータセルとは異なったスタイルで、「データ」ではないことを示します。
3. あなたが「ソート」や行ヘッダのために、
4. 理想的には、列をヘッダ行を「削除」することはできないはずですが、それはそれは多分ある

をスクロールしないという点で「凍結」され「私は、上記の例で探していますどのようなので、最初の列は、「固定レート」の行ヘッダを持つテーブルである

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

と：行ヘッダーのラベルはのようにデータから来ることを言及する価値可変レート "とする。その列のスタイリングは、データセルではなくヘッダーセルのように見えるべきです。

ここで、「フリーズ」や並べ替えを無効にするなど、gridOptionsのcolumnDefsを使用してこれらの機能を利用できることがわかりました。しかし、私が不明な点は、最初の列がヘッダーであることを宣言する方法があれば、これらのすべてを取得することだけです。

これは一般的な表のパラダイムのようです。

Answer 1

これは、行ヘッダテンプレートではかなり簡単です。あなたは次のように独自のテンプレートを定義することができ

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>"}); 
    } 
    }; 


}]); 

ワーキングplnkr http://plnkr.co/edit/9jZYgS3Ygaj2vhOnd2vh?p=preview

以下