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

Question

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

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

Answer 1

一般来说，我同意Justin的观点，即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 + ')');
    }
}

您可以在此处看到相应的示例。

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

Answer 2

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

Answer 3

我有一个类似的问题，即使类正确设置，jQuery也不会识别鼠标悬停。 作为测试我设置

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

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

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

它起作用了。 这完全是关于装货订单。 希望这可以帮助。

Answer 4

要使用jqgrid 4.4和IE 11突出显示工具提示并将其分配给整行，这样可以正常工作。

1. 在定义colModel时关闭所有单元格中的工具提示，例如：

   colModel：[{name：'ColumnName'，title：false}，...

2. 将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'); } } 

   }}

Answer 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'},
...

Answer 6

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

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

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

最后，可以在单个或一组cells/td上调用bootstrap函数tooltip ：

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

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