Переопределение uiGridHeaderCell

Question

Переопределение uiGridHeaderCell

0

Я хочу переопределить ui-grid uiGridHeaderCell. Я могу сделать это, добавив следующий тег скрипта, с html в теле, в головной раздел index.html, вот так...

<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 содержал в нем собственный файл и ссылался на него из тега. Кто-нибудь знает, как это сделать?

Joey_89 06 нояб. 2015, в 00:53

Источник

Теги:

angularjs

angular-ui-grid

1 ответ

Ещё вопросы

Dan J Miller · Accepted Answer · 2015-11-06T11-17-00.000Z

Когда вы устанавливаете columnDef в scope.gridOptions для столбца (ов), в котором вы хотите переопределить ячейку заголовка, добавьте свойство headerCellTemplate и укажите его на имя файла html файла.

Поэтому определение столбца будет включать в себя:

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

Редактировать:

Часто при смене шаблонов вам нужно явно указывать ui-grid для обновления

Обычно вы можете сделать это с помощью $scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.ALL) Я загрузил ваш плунжер и добавил этот код внутри обратного вызова http.get сразу после $scope.gridOptions.data = data; и это работает.

Однако на plunker, похоже, необходимо добавить настройку данных в следующий дайджест cyle (я думаю, что существует проблема синхронизации по отношению к тому, когда шаблоны и данные извлекаются вашим контроллером и когда начальные циклы дайджеров ui-grid завершены). Поэтому поставьте http.get внутри функции таймаута $, т.е. замените строки 37-39 вашего plunk на

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

Кроме того, я думаю, вам нужно ссылаться на файл шаблона с относительным путем ./uiGridHeaderCell.html а не только на uiGridHeaderCell.html

Рабочий стол: http://plnkr.co/edit/KitYBfKuRTQppuSRUCh7

На самом деле, я не работаю сейчас. Казалось, изначально, а сейчас не работает вообще. Вот плункер, чтобы показать, что происходит ... plnkr.co/rDBRr5xs9rALjTVl5LgC
Похоже, что ваше решение работает, если вы включите в качестве значения весь шаблон со всеми экранированными одинарными кавычками , например так: headerCellTemplate: '<div role = "columnheader" ng-class = "{\' sortable \ ': сортируемый} ". , «.
Обновил мой ответ, чтобы вам не нужно было включать весь шаблон.
Честная игра, Дэн, похоже, это решило.