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

4dbbbstv  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(86)

列标题具有类“.slick-column-name”
我添加了这个jquery -

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

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

col17t5w

col17t5w1#

请注意,我是Angular-Slickgrid的作者,正如前面回答中的评论所提到的,Angular-Slickgrid是几年前创建的SlickGrid之上的 Package 器(当时jQuery/jQueryUI都是炒作),所以~jQuery是一个深度依赖项~(自2023年以来不再需要jQuery)。
现在把注意力集中到你的问题上,如果我们直接在代码中搜索你已经确定的css类,我们可以看到这一行有以下代码

$("<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属性工作

qyuhtwio

qyuhtwio2#

var text = $(".slick-column-name").text();将返回所有列的所有文本。所以你要用这个类获取所有元素的文本。
所以如果你接着说:console.log(text)您将看到所有列标题输出到开发人员控制台。果然不出所料!
看起来你在jQuery可以做的事情上有一些脱节-$选择器获取具有该类名的所有元素,并且不够直观,无法知道你想要文本和列标题之间的1:1匹配。
你想做的是:
1.获取所有列标题(NOT TEXT)
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 });
});

我没有验证密码,但这应该能让你找到你要找的人。
现在,我假设你的意思是角滑网(拼写错误发生!你应该避免将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参阅

相关问题