ui-grid：固定列和主网格的单独 headerTemplate

Question

我正在使用 ui-grid 3 和默认的 ui.grid.pinning 插件。我的网格有一个类似于这样的配置：

$scope.gridOptions = {
      enableSorting: true,
      headerTemplate: 'views/report-header.html',
      columnDefs: [
        { field: 'firstName', displayName: 'First Name', width: 120, pinnedLeft: true },
        { field: 'lastName', displayName: 'Last Name', width: 120 },
        { field: 'company', displayName: 'Company', width: 120 },
      ]
    }

这会正确地导致 firstName 列被固定。但是，它也会导致自定义 headerTemplate 视图（在本例中只是 <div>I am unique!</div>）被设置为 both 固定列和左侧的主网格其中：

有什么方法可以指定哪些 header 应该设置为固定列，哪些应该设置为主网格？

Answer 1

我最终定义了单独的模板（分别为 pinnedGridTemplate.html 和 mainGridTemplate.html），并将它们分配给应该进入任一部分的列。上面的定义就变成了：

 $scope.gridOptions = {
      enableSorting: true,
      columnDefs: [
        {
          field: 'firstName',
          displayName: 'First Name',
          width: 120,
          pinnedLeft: true,
          headerTemplate: 'views/pinnedGridTemplate.html'
        },
        {
          field: 'lastName',
          displayName: 'Last Name',
          width: 120,
          headerTemplate: 'views/mainGridTemplate.html'
        },
        {
          field: 'company',
          displayName: 'Company',
          width: 120,
          headerTemplate: 'views/mainGridTemplate.html'
        },
      ]
    }