2016-11-22 6 views
2

Я использую свойство colDef cellTooltip, но это не работает.Свойство подсказки для заголовка столбца ui-grid angularjs

$scope.gridOptions.columnDefs = [{ displayName: 'Test', field: '_test', 
    cellTooltip: function (row, col) { return row.entity._Number }, 
    cellTemplate: '<div class="ui-grid-cell-contents" title="{{row.entity._Number}}"></div>'}, 
]; 

Любая помощь будет оценена по достоинству.

+0

Что вы пробовали, обмениваетесь листами кода и сообщениями об ошибках, если таковые имеются. Также см. Http://stackoverflow.com/help/how-to-ask – Jax

ответ

1

Для заголовка всплывающей подсказки в ui-grid есть headerCellTemplate Недвижимость доступна. Это сработало для меня.

headerCellTemplate: '<div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"><span class="ui-grid-header-cell-label ng-binding" title="Test">Test</span></div>' 
+0

, чтобы расширить или настроить шаблон заголовка по умолчанию, вы можете посмотреть здесь оригинальный шаблон: https://github.com/angular-ui/ui- сетка/BLOB/Master/SRC/шаблоны/UI сетки/uiGridHeaderCell.html –

0

По умолчанию ячейки в сетке устанавливаются, чтобы скрыть какие-либо переполнение, так что если вы просто поп всплывающую подсказку там не будет отображаться. Вы можете решить это, добавив некоторый пользовательский переполняющий CSS на ваш cellTemplate или если вы используете UT Bootstrap, вы можете добавить tooltip-append-to-body = "true" к элементу с помощью своей всплывающей подсказки, а всплывающая подсказка будет добавлена ​​к тело и абсолютно позиционируется там, где это необходимо.

Для переполнением CSS, добавьте класс "сетку-подсказку" в шаблоне ячейки и определить класс CSS, как:

.grid-tooltip { 
    overflow: visible; 
    z-index: 9999999; 
    float: left; 
} 

Reference: http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

Plunker пример с переполнением CSS и UI Bootstrap (подсказка-Append -to-body = "true"): http://embed.plnkr.co/v7a1W5mFHHaG894IDLTK/

1

Ответы Bhavjot содержат хорошую угловую подсказку, но в каждой ячейке, а не в заголовке, как вы просили. Я вижу ваши шаблонные работы, но если вы ищете что-то более угловатым я соединял этот шаблон:

<div class="grid-tooltip" tooltip="{{ col.displayName }}" tooltip- 
    placement="{{ renderIndex === 0 ? 'right' : 'left'}}"> 
    <div class="ui-grid-cell-contents"> 
     {{ col.displayName }} 
    </div> 
</div> 

Кроме того, здесь является plunker, где вы можете увидеть оба типа всплывающих подсказок, работающего вместе. https://plnkr.co/edit/cCIKBWx0KfbIPUiheZP6?p=preview Пожалуйста, отметьте один из ответов как ответ на свой вопрос.

Смежные вопросы