jQuery 如何在 jqGrid 鼠标悬停时设置工具提示？

How to set the tool tip on jqGrid mouse over?

提问by Marcus Leon

How can you set the "tool tip" that appears when you hover your mouse over a jqGrid row/cell?

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

Currently the tool tip appears to just be the cell contents.

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

回答by Oleg

In general I agree with Justin, that jqGrid get you no direct way to set tooltip on the row, you can do this only on the cell basis. So you have to do this manually.

总的来说，我同意 Justin 的观点，即 jqGrid 无法让您直接在行上设置工具提示，您只能在单元格基础上执行此操作。因此，您必须手动执行此操作。

First of all you should set title:falseproperty on all cells to have no tooltip for the cells. Then you have to set your custom tooltips of every row. You can do this for example inside of loadCompleteevent handle. The corresponding code can be about following:

首先，您应该在所有单元格上设置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 + ')');
    }
}

You can see the corresponding example you can see live here.

你可以看到相应的例子，你可以在这里看到。

UPDATED: In more late versions of jqGrid there are much more effective way to set custom title. It's the usage of cellattr(see the answerfor an example) or the usage of rowattr(see the answer). I recommend to use gridview: trueoption of jqGrid always. The usage of cellattror rowattrtogether with gridview: trueallows to create full grid body inclusive of all tooltips which one need in one modification of the page(the full HTML fragment of grid body inclusive of all tooltips will be assigned to innerHTMLproperty). The usage of .attrin the loop follows at least to reflowwhich is expansive (see here). So the usage of cellattrand rowattrin combination with gridview: trueallow to achieve the best performance.

更新：在 jqGrid 的更新版本中，有更有效的方法来设置自定义title. 它是cellattr(see the answerfor an example) 或 use of rowattr(see the answer)的用法。我建议gridview: true始终使用jqGrid 选项。的使用cellattr或rowattr连同gridview: true允许创建满格体包容自己所需要的所有工具提示的页面的一个修改（所有的提示的栅格体包容性的完整的HTML片段将被分配到innerHTML属性）。.attr在循环中的使用至少遵循回流，这是广泛的（见这里）。所以使用cellattr和rowattr结合gridview: true允许达到最佳性能。

回答by Justin Ethier

There is no jqGrid API for this. If you want to change the tooltip text you will have to write code to manually change the value of the cell's titleelement.

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

回答by EWPDesign

I had a similar problem, where jQuery just WOULD NOT recognize a mouseover even though the class was set correctly. As a test I setup

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

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

No results. Then I changed it to

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

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

and it worked. It was all about loading order. Hope this helps.

它奏效了。这完全是关于加载顺序。希望这可以帮助。

回答by Tom Regan

To highlight and assign a tooltip to an entire row, using jqgrid 4.4 and IE 11, this works.

要突出显示并将工具提示分配给整行，使用 jqgrid 4.4 和 IE 11，这是有效的。

1. turn off tooltip in all cells when defining the colModel, for example:

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

2. assign a loadComplete method to the grid:

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

   } }

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

   } }

回答by Supra

Use a custom formatter

使用自定义格式化程序

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

        }

And then use this formatter in the col model

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

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

回答by Suhail Gupta

I would like to extend my answer for using bootstraptooltip with jqGrid. Grid sets a tooltip by default which could be cleared using title:falsefor each column.

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

To select a particular tdor cellwe could create our own class/attribute using cellattrproperty as a function for any cell. For example:

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

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

Then finally, bootstrap function tooltipcould be called on a single or a collection of cells/td:

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

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

container:bodyneeds to be used to maintain the behavior of htmltables.

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