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 + ')');
    }
}

您可以看到相应的示例，您可以看到实时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的结合使用可以实现最佳效果。

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突出显示工具提示并将其分配给整行，这可以正常工作。

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

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

} }

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

我想扩展我在jqGrid中使用bootstrap工具提示的答案。网格默认设置工具提示，可以使用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表的行为。

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

6 个答案: