如何在 Angular-Slickgrid 中获取列标题的工具提示？

Question

列标题具有“.slick-column-name”类

我添加了这个 jquery -

var text = $(".slick-column-name").text();
$(".slick-column-name").tooltip({ title: text });

但它在每个工具提示中显示每个列名称（例如 ID 、 Description 、 Title 是列标题，因此每个列标题的工具提示显示为“ID Description Title”

Answer 1

请注意，我是 Angular-Slickgrid 的作者，正如之前答案中的评论中提到的，Angular-Slickgrid 是几年前创建的 SlickGrid 之上的包装器（当时 jQuery/jQueryUI 都是炒作）所以〜jQuery 是一种深度依赖〜（自 2023 年起不再需要 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 中的列 - 接口）

所以简短的答案是...只需使用它，使您的

toolTip

与您的

name

相同，您就可以开始了

this.columnDefinitions = [
  { id: 'firstName', field: 'firstName', name: 'First Name', toolTip: 'First Name Tooltip' }, 
  // ...
  }
];

应该可以做到...请注意，我没有测试它，但我只是检查了代码以找到答案。直接看代码总是好的，你会发现这些问题的很多答案。

编辑

我尝试过，它确实按照

toolTip

属性的预期工作

Answer 2

var text = $(".slick-column-name").text();

将返回所有列的所有文本。因此，您将获得该类的所有元素的文本。

因此，如果您跟进：

console.log(text)

，您将看到所有列标题输出到开发人员控制台。果然如此！

看起来你对 jQuery 在这里可以做的事情有些脱节 -

$

选择器获取具有该类名称的所有元素，并且不够直观，无法知道你想要文本和列标题之间的 1:1 匹配。

您想做的是：

1. 获取所有列标题（非文本）
2. 循环遍历每个列标题，并将列名称工具提示设置为列标题文本。

我对 slickgrid 不是 100% 熟悉，但这应该会给你一个想法：

// 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）