Angularjs 角度UI网格标头单元格模板

如何使用文本和自定义样式设置标题，保持排序和筛选功能不变

例如：

headerCellTemplate: '<div>Stone Id <b style='color: red'>*</b></div>'

这是我的宝物：

---

谢谢。

在这里您可以找到ui网格标题的默认模板：

所以，你唯一要做的就是随心所欲地改变。以下是您想要实现的目标：

自定义标题单元格模板

---

现在，我遇到了另一个问题，它只对一列起作用，问题是当我对另一列使用该模板时，它无法对该列的标题单击进行排序。更新的plunker:Antoher方法：

$scope.gridOptions = {
    columnDefs: [{
      displayName: 'Name',
      field: 'name',
      headerCellFilter: 'translate',
      headerCellTemplate: 'customTemplate.html',
      enableSorting: true,

    }, {
      displayName: 'GENDER',
      field: 'gender',
      headerCellFilter: 'translate'
    }, {
      displayName: 'COMPANY',
      field: 'company',
      headerCellFilter: 'translate',
      enableFiltering: false
    }]
  };

<div
  role="columnheader"
  ng-class="{ 'sortable': sortable, 'ui-grid-header-cell-last-col': isLastCol }"
  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="0"
    ng-keydown="handleKeyDown($event)"
    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 }}<b style='color: red'>*</b>
    </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 }"
       title="{{isSortPriorityVisible() ? i18n.headerCell.priority + ' ' + ( col.sort.priority + 1 )  : null}}"
       aria-hidden="true">
     </i>
     <sub
       ui-grid-visible="isSortPriorityVisible()"
       class="ui-grid-sort-priority-number">
       {{col.sort.priority + 1}}
     </sub>
    </span>
  </div>

  <div
    role="button"
    tabindex="0"
    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-keydown="headerCellArrowKeyDown($event)"
    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>