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

k4emjkb1  于 2023-08-02  发布在  Angular
关注(0)|答案(5)|浏览(111)

我正在使用colDef的cellTooltip属性,但似乎不起作用。

$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>'},
];

字符串
如果你能帮忙的话,我会很感激的。

wqsoz72f

wqsoz72f1#

只需在列定义中添加headerTooltip: 'Custom header string',就可以将工具提示添加到列标题中。
https://github.com/angular-ui/ui-grid/issues/3118

w8ntj3qf

w8ntj3qf2#

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

字符串

kx5bkwkv

kx5bkwkv3#

Bhavjot的答案确实包含了一个很好的有Angular 的工具提示,但在每个单元格上,而不是你要求的标题。我看到你的模板工程,但如果你正在寻找一些更有Angular 的东西,我把这个模板放在一起:

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

字符串
此外,这里是一个柱塞,你可以看到两种类型的工具提示一起工作。https://plnkr.co/edit/cCIKBWx0KfbIPUiheZP6?p=preview请将其中一个答案标记为您问题的答案。

blpfk2vs

blpfk2vs4#

默认情况下,网格的单元格被设置为隐藏任何溢出,所以如果你只是在其中弹出一个工具提示,它不会显示。你可以通过添加一些自定义溢出CSS到你的cellTemplate来解决这个问题,或者如果你使用的是UI Bootstrap,你可以用你的工具提示添加tooltip-append-to-body=“true”到元素中,工具提示将被附加到主体中,并完全定位在需要的位置。
对于Overflow CSS,在单元格模板中添加类“grid-tooltip”,并将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/
带有Overflow CSS和UI Bootstrap的Plunker示例(tooltip-append-to-body=“true”):http://embed.plnkr.co/v7a1W5mFHHaG894IDLTK/

kulphzqa

kulphzqa5#

而不是cellTemplate或headerCellTemplate。您可以简单地将columnDefs中的数据绑定为

headerTooltip: 'my tooltip data'

字符串

相关问题