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

Question

列标题有 class“.slick-column-name”

我添加了这个jquery -

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

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

Answer 1

var text = $(".slick-column-name").text(); 将 return 所有列的所有文本。因此，您将获得包含 class.

的所有元素的文本

因此，如果您跟进它：console.log(text)，您会看到所有 header 列的输出到您的开发者控制台。符合预期！

您似乎对 jQuery 在这里可以做的事情有些不理解 - $ 选择器获取具有该 class 名称的所有元素，并且不够直观以了解您想要文本和列 header.

之间的 1:1 匹配

您想要做的是：

获取所有列 headers（非文本）
遍历每一列 header，并将列名称工具提示设置为列 header 文本。

我不是 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 混用。由于 re-rendering，将两者混合可能会产生意想不到的 side-effects（想象工具提示工作一分钟，然后您进行更改，当发生某些更改时工具提示消失了！）

正在检查 github 存储库 Angular SlickGrid：https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-headerbutton.component.ts

看起来还有一个工具提示选项，您也可以通过 Angular 来执行此操作（他们的示例演示看起来在这里：https://ghiscoding.github.io/Angular-Slickgrid/#/headerbutton）

Answer 2

请注意，我是 Angular-Slickgrid 的作者，并且如前一个答案的评论中所述，Angular-Slickgrid 是 SlickGrid 之上的包装器几年前创建的（当时 jQuery/jQueryUI 是所有的炒作）所以 jQuery 是一个很深的依赖关系。

现在专注于您的问题，如果我们直接在代码中搜索您已识别的 css class，我们可以看到具有以下代码的 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 属性

一起使用

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

How do I get tooltips for column heading in Angular-Slickgrid?

jquery

jquery-ui-tooltip

bootstrap-4

angular-slickgrid