列标题的工具提示属性ui-grid angularjs

我正在使用colldf的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>'}, 
];

任何帮助，将不胜感激。

来源

2016-11-22 Surendra Mourya

你有什么尝试，共享代码和错误消息，如果有的话。另请参阅http://stackoverflow.com/help/how-to-ask – Jax

对于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>'

来源

2016-11-22 14:32:46

以扩展或自定义默认标题模板，您可以在这里查看原始模板：https：//github.com/angular-ui/ui-网格/斑点/主/ SRC /模板/ UI栅/ uiGridHeaderCell.html –

默认情况下，网格的单元格被设置为隐藏任何溢出，所以如果你只弹出一个工具提示，它不会显示出来。您可以通过向cellTemplate添加一些自定义溢出CSS来解决这个问题，或者如果您使用的是UI Bootstrap，则可以使用工具提示将tooltip-append-to-body =“true”添加到元素，工具提示将被添加到身体和绝对定位在需要的地方。

溢出CSS，添加类 “网格工具提示” 细胞模板和限定CSS类如：

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

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

Plunker例如用溢流CSS和UI自举（工具提示-追加-to-body =“true”）： http://embed.plnkr.co/v7a1W5mFHHaG894IDLTK/

来源

2017-02-08 01:00:04 Bhavjot

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 请标记其中一个答案作为您的问题的答案。

来源

2017-06-02 14:20:54 Gary

列标题的工具提示属性ui-grid angularjs

回答

相关问题