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>）设置为两者固定列和左侧的主网格：

是否有任何方法可以指定应为固定列设置哪个标头，以及应为主网格设置哪个标头？

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'
        },
      ]
    }