问题描述
列标题具有类“.slick-column-name”
我添加了这个 jquery -
var text = $(".slick-column-name").text();
$(".slick-column-name").tooltip({ title: text });
但它在每个工具提示中显示每个列名称,(例如 ID 、描述、标题是列标题,因此每个列标题的工具提示显示为“ID 描述标题”
解决方法
请注意,我是 Angular-Slickgrid 的作者,正如在之前答案中的评论中提到的,Angular-Slickgrid 是几年前创建的 SlickGrid 之上的包装器(当时 jQuery/jQueryUI 是所有的炒作),所以 jQuery 是一个很深的依赖。
现在关注您的问题,如果我们直接在代码中搜索您确定的 css 类,我们可以看到此 line 具有以下代码
$("<div class='ui-state-default slick-group-header-column' />")
.html("<span class='slick-column-name'>" + m.name + "</span>")
.attr("id","" + uid + m.id)
.attr("title",m.toolTip || "")
.data("column",m)
.addClass(m.headerCssClass || "")
.addClass(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn? 'frozen': '')
.appendTo(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn? $groupHeadersR[index]: $groupHeadersL[index]);
}
哦,看那个...已经有一个 toolTip
属性,那么它是从哪里来的呢?这是列定义中的一个选项(Angular-Slickgrid 中的 column - interface)
所以简短的回答是...只需通过使您的 toolTip
与您的 name
相同来使用它,您应该很高兴
this.columnDefinitions = [
{ id: 'firstName',field: 'firstName',name: 'First Name',toolTip: 'First Name Tooltip' },// ...
}
];
应该这样做...请注意,我没有测试它,但我只是检查了代码以找到答案。直接看代码总是好的,你会发现这些问题的很多答案。
编辑
我试过了,它确实与 toolTip
属性一起工作
var text = $(".slick-column-name").text();
将返回所有列的所有文本。因此,您将使用该类获取所有元素的文本。
因此,如果您继续使用:console.log(text)
,您会看到所有列标题输出到您的开发者控制台。不出所料!
似乎您在 jQuery 可以在这里做的事情上有些脱节 - $
选择器获取具有该类名的所有元素,并且不够直观,无法知道您想要文本和文本之间的 1:1 匹配列标题。
你想做的是:
- 获取所有列标题(非文本)
- 遍历每个列标题,并将列名称工具提示设置为列标题文本。
我不是 100% 熟悉 slickgrid,但这应该给你一个想法:
// I'm using $ in the variable name to label this element as a jQuery extended variable
var $columnNames = $(".slick-column-name");
$columnNames.each(function(elem) {
// this represents a single column header
var $elem = $(elem);
// gets the individual text for a header
var text = $elem.text();
// we grab the CLOSEST parent element that matches ".slick-column-name" and set the tooltip
var $columnHeading = $elem.closest(".slick-column-name").tooltip({ title: text });
});
我没有验证代码,但这应该会让你沿着你需要点击的路径走下去。
现在,我假设您的意思是 ANGULAR SLICKGRID(会发生拼写错误!) - 您应该避免将 jQuery 与 Angular 混合使用。由于重新渲染,将两者混合可能会产生意想不到的副作用(想象一下工具提示工作一分钟,然后您进行更改,当发生变化时工具提示消失了!)
查看 Angular SlickGrid 的 github 存储库:https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-headerbutton.component.ts
看起来您也可以使用工具提示选项通过 Angular 执行此操作(他们的示例演示看起来位于此处:https://ghiscoding.github.io/Angular-Slickgrid/#/headerbutton)