javascript - 用户界面网格 : separate headerTemplate for pinned column and main grid

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 View (在本例中为 <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'
        },
      ]
    }