代码之家 › 专栏 › 技术社区 › JohnnyTheJet

剑道中的过滤工具提示

kendo-grid kendo-ui jquery javascript

JohnnyTheJet · 技术社区 · 8 年前

我在剑道UI中有一个工具提示,我试图根据单元格的列名过滤单元格,因为标准的td:nthchild无法工作(用户可以移动列)。我想根据是否有人悬停在我列名的单元格上使用工具提示。我如何在过滤器领域实现这一点?还是应该在show功能中执行?

this.$el.kendoTooltip({
            filter: "th:contains('MY COLUMN NAME')",
            show: function (e) {
              if (this.content.text().length > 0) {
                  this.content.parent().css("visibility", "visible");
              }  
            },
            hide: function(e) {
                this.content.parent().css("visibility", "hidden");
            },
            content: function (e) {

                var target = e.target;
                return $(target).siblings().first().text();
            }
        });

1 回复 | 直到 8 年前

DontVoteMeDown 8 年前

这样地?

this.$el.kendoTooltip({
    filter: "thead th:contains('ColumnA')"
});

Demo

更新

由于要基于列标题在行单元格上显示工具提示,因此不能使用 filter

show: function(e) {
    let index = this.target().index(), // Get hovered element's column index
        columns = grid.getOptions().columns, // Get grid's columns
        column = columns[index]; // Get current column

    // If target TD is not under 'ColumnA', prevent tooltip from being showed
    if (column.title != "ColumnA") {
        this.hide();
    }
}

Demo

不能防止自己的事件,因此使用 hide() 工作,但工具提示仍然打开闪烁,然后再次隐藏,它有可能捕捉到打开。尝试使用 e.preventDefault() 和 return false 这是一个合理的说法 “取消小部件显示” 但是没有运气。这是我能做的最好的了。