Question

我在Angular ui-grid中尝试做的事情看起来很常见，但我找不到任何描述解决方案的内容。

我有一张桌子。像许多表一样，第一行实际上是一个＆＃34;行标题＆＃34;。

现在具体是什么意思：

与列标题类似，值始终相同。它们不是＆＃34;数据＆＃34;
与列标题类似，它们的样式与非标题数据单元格不同，表明它们不是＆＃34;数据＆＃34;。
你不应该＆＃34;排序＆＃34;也不是＆＃34;删除＆＃34;标题行
理想情况下，行标题的列是＆＃34;冻结＆＃34;因为它不会滚动

或许值得一提的是，行标题标记来自数据的COME，如：

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

所以我在上面的例子中寻找的是一个表格，其中第一列的行标题是＆＃34;固定利率＆＃34;和＆＃34;可变利率＆＃34;。该列的样式应该＆＃34;看起来像＆＃34;标题单元格而不是数据单元格。

现在我知道其中一些东西像＆＃34; frezeing＆＃34;并且可以通过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

如何做＆＃34;行标题＆＃34;在Angular ui-grid中

1 个答案: