如何在jqGrid鼠标上设置工具提示？答案

【问题标题】：How to set the tool tip on jqGrid mouse over?如何在jqGrid鼠标上设置工具提示？
【发布时间】：2010-11-29 19:59:52
【问题描述】：

如何设置将鼠标悬停在 jqGrid 行/单元格上时出现的“工具提示”？

目前，工具提示似乎只是单元格内容。

【问题讨论】：

【解决方案1】：

总的来说，我同意贾斯汀的观点，jqGrid 无法让您直接在行上设置工具提示，您只能在单元格的基础上执行此操作。所以你必须手动完成。

首先，您应该在所有单元格上设置title:false 属性，以使单元格没有工具提示。然后你必须设置每一行的自定义工具提示。例如，您可以在 loadComplete 事件句柄中执行此操作。对应的代码大概如下：

loadComplete: function() {
    var ids = grid.jqGrid('getDataIDs');
    for (var i=0;i<ids.length;i++) {
        var id=ids[i];
        var rowData = grid.jqGrid('getRowData',id);
        $('#'+id,grid[0]).attr('title', rowData.Name + ' (' +
                                        rowData.Category + ', ' +
                                        rowData.Subcategory + ')');
    }
}

你可以看到相应的例子你可以看到直播here。

更新：在 jqGrid 的更新版本中，有更有效的方法来设置自定义 title。这是cellattr 的用法（例如，参见the answer）或rowattr 的用法（参见the answer）。我建议始终使用 jqGrid 的 gridview: true 选项。 cellattr 或 rowattr 与 gridview: true 一起使用允许创建包含所有工具提示的完整网格主体在页面的一次修改中（包含网格主体的完整 HTML 片段）所有工具提示将分配给innerHTML 属性）。循环中.attr 的使用至少遵循reflow 的扩展性（参见here）。因此cellattr 和rowattr 与gridview: true 结合使用可以达到最佳性能。

【讨论】：

我在您的演示上进行了测试，但工具提示并不总是出现。例如，将鼠标悬停在第 1 行，然后是第 2 行，然后是第 1 行。如何改进代码以始终显示工具提示？
@eugene y：您在哪个浏览器中遇到了问题？在我的测试中，我总是看到工具提示。
是 Firefox 3.6.15 稍后会检查其他一些浏览器。
@eugene y：我可以看到 FF 4.0 RCm 中工具提示不稳定的影响，但我在任何工具提示中都看到了同样的问题：例如标准 jqGrid。我不知道原因。可能是 Firefox 中的错误。看this post。
是的，似乎是 FF 中的一个错误。感谢您的帮助！

【解决方案2】：

没有用于此的 jqGrid API。如果要更改工具提示文本，则必须编写代码来手动更改单元格的 title 元素的值。

【讨论】：

【解决方案3】：

我遇到了类似的问题，即使类设置正确，jQuery 也无法识别鼠标悬停。作为测试，我设置了

$('.note).mouseover(function(){alert('hello')})

没有结果。然后我把它改成

$('.note').live('mouseover',function(){alert('hello')})

它奏效了。这完全是关于加载顺序。希望这会有所帮助。

【讨论】：

【解决方案4】：

使用 jqgrid 4.4 和 IE 11 突出显示并为整行分配工具提示，这是可行的。

在定义colModel时关闭所有单元格中的tooltip，例如：

colModel: [ { name: 'ColumnName', title: false },...

为网格分配一个 loadComplete 方法：

loadComplete: function () {
var rows = $(this).getDataIDs();

for (var i = 0; i < rows.length; i++) {
    var row = $(this).getRowData(rows[i]);
    if (row.IsSomething == 'true') {
        this.rows[i + 1].className = this.rows[i + 1].className + ' ui-state-highlight';
        $(this.rows[i + 1]).attr('title', 'This tooltip will appear for the entire row');
    }
}

} }

【讨论】：

【解决方案5】：

使用自定义格式化程序

        function myCellFormatter(cellvalue, options, rowObject) {           
                return '<span title="' + rowObject.name + rowObject.category +rowObject.subcategory +'">'+ cellvalue +'</span>';

        }

然后在col模型中使用这个格式化器

{index: 'name', name: 'name',formatter:myCellFormatter, label: 'Name'},
...

【讨论】：

【解决方案6】：

我想扩展我对在 jqGrid 中使用 bootstrap 工具提示的答案。 Grid 默认设置一个工具提示，每列可以使用title:false 清除。

要选择特定的td 或cell，我们可以使用cellattr 属性作为任何单元格的函数来创建自己的类/属性。例如：

cellattr: function(rowID,val,rawObject,cm,rdata) {
    return "class='tooltip-cell';" // could return 'n' number of attributes
}

最后，引导函数tooltip 可以在单个或cells/td 的集合上调用：

$('#myGrid .tooltip-cell').tooltip({
            container:'body',
            placement: 'bottom',
            title: 'Click to edit',
            trigger: 'hover'
        });

container:body 需要用于维护html 表的行为。

【讨论】：