jQuery jqGrid 3.4 中的自定义数据工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1201473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom data tooltips in jqGrid 3.4
提问by Josh E
I've been working with the excellent jqGrid plugin, and it works great. Recently though, I was asked to implement some custom tooltips for the grid. Now, the documentationis very thorough, but it doesn't address how (if it is at all possible) to accomplish this.
我一直在使用优秀的 jqGrid 插件，而且效果很好。不过最近，我被要求为网格实现一些自定义工具提示。现在，该文档非常详尽，但没有说明如何（如果可能的话）完成此操作。
Here's an example of what I'm looking for:
这是我正在寻找的示例：
|col A | col B |...
| data | data |...
| (mouse hover) - data x
|colA | 列 B |...
| 数据| 数据 |...
| （鼠标悬停） - 数据 x
I've searched through the documentation and source for how/where to define tooltips but the closest I have gotten is custom tooltips for buttons in edit mode. I do have an event handler for the afterInsertRow event - through that I could get the rowId and such, but I'm not sure how to define HTML attributes in that event.
我已经在文档和来源中搜索了如何/在哪里定义工具提示，但我得到的最接近的是编辑模式下按钮的自定义工具提示。我确实有一个用于 afterInsertRow 事件的事件处理程序 - 通过它我可以获得 rowId 等，但我不确定如何在该事件中定义 HTML 属性。
EDIT: to clarify, I'd like to set the title attribute on an individual cell to a particular piece of data (that I already have in the jqgrid model)
编辑：澄清一下，我想将单个单元格上的标题属性设置为特定的数据段（我在 jqgrid 模型中已经有了）
EDIT 2: I've tried inserting the following into the afterInsertRow event, with no joy, where aData is the JSON model, and ExpirationDate is the model name:
编辑 2：我尝试将以下内容插入 afterInsertRow 事件中，没有任何乐趣，其中 aData 是 JSON 模型，ExpirationDate 是模型名称：
afterInsertRow: function(rowid, aData) {
grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });
the following code in the same event handler DOES work, however:
但是，同一事件处理程序中的以下代码确实有效：
grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });
EDIT 3: working with redsquare's excellent suggesstions, I've determined that the title attribute is being set sometime afterthe afterInsertRow event: I've stepped through and determined that it is being correctly set by either method outlined in comments, but unfortunately, I get a source code is not available for this location when trying to step further, meaning I can't see exactly where the title is being changed.
编辑 3：使用 redsquare 的优秀建议，我确定在 afterInsertRow 事件之后的某个时间设置了 title 属性：我已经通过并确定它是通过评论中概述的任一方法正确设置的，但不幸的是，我尝试更进一步时，无法获得此位置的源代码，这意味着我无法确切看到标题更改的位置。
EDIT 4: (thanks for your patience and helping me work through this!) again taking redsquare's comment about trying the loadComplete event, I was able to successfully get and modify the cell's attributes, but the title attribute stubbornly remains the same:
编辑 4：（感谢您的耐心并帮助我解决这个问题！）再次考虑 redsquare 关于尝试 loadComplete 事件的评论，我能够成功获取和修改单元格的属性，但标题属性顽固地保持不变：
loadComplete: function() {
var ids = grid.getDataIDs();
for (var i = 0; i < ids.length; i++) {
grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
}
FINAL EDIT: please see my answer below - I was able to find the root cause of the issue, with help from redsquare.
最终编辑：请参阅下面的答案 - 在 redsquare 的帮助下，我能够找到问题的根本原因。
Any help would be appreciated
任何帮助，将不胜感激
回答by Josh E
Ok, I found the issue after doing some close inspection of the properties being set. It turns out that I, knuckle-head that I am, didn't read the documentation for the grid.setCell(...) method closely enough:
好的，我在仔细检查了正在设置的属性后发现了这个问题。事实证明，我这个笨蛋没有仔细阅读 grid.setCell(...) 方法的文档：
This method can change the content of particular cell and can set class or style properties. Where: ?rowid: the id of the row,
?colname: the name of the column (this parameter can be a number beginning from 0)
?data: the content that can be put into the cell. If empty string the content will not be changed
?class: if class is string then we add a class to the cell using addClass; if class is an array we set the new css properties via css
?properties: sets the attribute properies of the cell
Example :
setCell("10", "tax", '', {color:'red','text-align':'center'}',{title:'Sales Tax'})
will set the contents of the tax field in row 10 to red and centered and change the title to 'Sales Tax'.
此方法可以更改特定单元格的内容，并可以设置类或样式属性。其中： ?rowid：行的 id，
?colname：列名（该参数可以是从0开始的数字）
?data：可以放入单元格的内容。如果为空字符串内容不会改变
?class: 如果 class 是字符串，那么我们使用 addClass 向单元格添加一个类；如果 class 是一个数组，我们通过 css 设置新的 css 属性
?properties：设置单元格的属性properties
例子 ：
setCell("10", "tax", '', {color:'red','text-align':'center'}',{title:'销售税'})
将第 10 行中的税收字段的内容设置为红色并居中，并将标题更改为“销售税”。
In short, the arguments I was passing into the method were setting css properties (the 4th arg) instead of the attributes (the 5th arg). The result was that two title attributes were added, with one being improperly formatted. The below shows the correct invocation of the method to accomplish what I was trying to do:
简而言之，我传递给方法的参数是设置 css 属性（第 4 个参数）而不是属性（第 5 个参数）。结果是添加了两个标题属性，其中一个格式不正确。下面显示了正确调用方法来完成我想要做的事情：
grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});
Thanks again to redsquare for his/her help in solving this!
再次感谢 redsquare 帮助解决这个问题！
回答by redsquare
What info would the tooltip be displaying? Lets assume the tooltip info is maybe inside the first cell (hidden) in the row. You could target any row inside the grid and by using the .live method you have any new rows covered.
工具提示将显示哪些信息？让我们假设工具提示信息可能位于行中的第一个单元格（隐藏）内。您可以定位网格内的任何行，并使用 .live 方法覆盖任何新行。
$('#gridId>tbody>tr').live('mouseover', showTip)
.live('mouseoff', hideTip);
function showTip(){
var $row = $(this);
//get tooltip from first hidden cell
var tipText = $row.children(':eq(0)').text()
//append tipText to tooltip and show
}
function hideTip(){
//hide tip
}
回答by redsquare
ok after clarity you could try this. It assumes the cell you want to change is the fourth in each row and sets the title of the cell to the current text in that cell. Change as needed.
确定后，你可以试试这个。它假定您要更改的单元格是每行中的第四个，并将单元格的标题设置为该单元格中的当前文本。根据需要更改。
N.B The grid actually breaks standards by using integer id's for the rows. However the following should still work.
注意网格实际上通过对行使用整数 id 来打破标准。但是，以下应该仍然有效。
$("#gridId").jqGrid({
...,
afterInsertRow : setCellTitle,
...
});
function setCellTitle(rowid){
//get fourth cell in row
var $cell = $(rowid).children(':eq(3)');
//set title attribute
$cell.attr('title', $cell.text());
}
