覆盖 uiGridHeaderCell

Question

我想覆盖 ui-grid 的 uiGridHeaderCell。我可以通过将以下脚本标记添加到 index.html 的 head 部分来实现，就像这样...

<script type="text/ng-template" id="ui-grid/uiGridHeaderCell">
      <div
        role="columnheader"
        ng-class="{ 'sortable': sortable }"
        ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'"
        aria-sort="{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}">
        <div
          role="button"
          tabindex="-1"
          class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"
          col-index="renderIndex"
          title="TOOLTIP">
          <span
            class="ui-grid-header-cell-label"
            ui-grid-one-bind-id-grid="col.uid + '-header-text'">
            {{ col.displayName CUSTOM_FILTERS }}
          </span>
      
          <span
            ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'"
            ui-grid-visible="col.sort.direction"
            aria-label="{{getSortDirectionAriaLabel()}}">
            <i ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }" aria-hidden="true"></i>
          </span>
        </div>
      
        <div
          role="button"
          tabindex="-1"
          ui-grid-one-bind-id-grid="col.uid + '-menu-button'"
          class="ui-grid-column-menu-button"
          ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false"
          ng-click="toggleMenu($event)"
          ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}"
          ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
          aria-haspopup="true">
          <i class="ui-grid-icon-angle-down" aria-hidden="true">&nbsp;</i>
        </div>
      
        <div ui-grid-filter></div>
      </div>
</script>

您可以看到我已经设置了 tabindex="-1"，因此 cellHeader 不是跳格序列的一部分。这确实成功地覆盖了默认的 uiGridHeaderCell。但是，我认为这不是一个非常干净的方法。我宁愿将 html 放在它自己的文件中，并从标签中引用它。有人知道怎么做吗？

Answer 1

当您在 scope.gridOptions 中为要覆盖 header 单元格的列设置 columnDef 时，添加属性 headerCellTemplate 并将其指向 html 文件的文件名。

所以列定义将包括类似的内容：

{
    field: '...', 
    name: '...',
    headerCellTemplate: 'someDirectory/someDirectory/your-custom-html-file.html'
}

编辑：

经常在更改模板时需要明确告诉ui-grid刷新

通常您可以使用 $scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.ALL) 执行此操作我下载了您的 plunk 并在 $scope.gridOptions.data = data; 之后立即在 http.get 回调中添加了该代码并且它有效。

然而，在 plunker 上，它似乎需要将数据设置添加到下一个摘要循环（我认为存在与控制器何时检索模板和数据以及何时 ui-grid 的初始摘要周期已完成）。因此，将 http.get 放入 $timeout 函数中，即将 plunk 的第 37-39 行替换为

$timeout(function () {$http.get('./data.json').success(function(data) {
    $scope.gridOptions.data = data;
})}, 0);

此外，我认为您需要使用相对路径 ./uiGridHeaderCell.html 而不是 uiGridHeaderCell.html

来引用模板文件

在这里工作：http://plnkr.co/edit/KitYBfKuRTQppuSRUCh7

覆盖 uiGridHeaderCell

Overriding uiGridHeaderCell

angularjs

angular-ui-grid