jqGrid 3.4中的自定义数据工具提示 [英] Custom data tooltips in jqGrid 3.4
问题描述
我一直在使用出色的jqGrid插件，并且效果很好.但是最近，我被要求为网格实现一些自定义工具提示.现在，文档非常详尽，但是没有解决如何(如果解决)完全有可能)来做到这一点.
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 documentation is very thorough, but it doesn't address how (if it is at all possible) to accomplish this.
以下是我正在寻找的示例:
Here's an example of what I'm looking for:
| col A | col B | ...
|数据数据| ...
| (鼠标悬停)-数据x
|col A | col B |...
| data | data |...
| (mouse hover) - data x
我在文档和来源中搜索了如何/在何处定义工具提示，但是我得到的最接近的是在编辑模式下按钮的自定义工具提示.我确实具有afterInsertRow事件的事件处理程序-通过该事件处理程序，我可以获取rowId等，但是我不确定如何在该事件中定义HTML属性.
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.
为澄清起见，我想将单个单元格上的title属性设置为特定数据段(我已经在jqgrid模型中拥有该数据段了)
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)
我尝试将以下内容插入到afterInsertRow事件中，没有喜悦，其中aData是JSON模型，ExpirationDate是模型名称:
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:
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' });
使用redsquare的出色建议，我确定在afterInsertRow事件后 的某个时间设置了title属性:注释中概述了这两种方法，但是不幸的是，尝试进一步操作时，此位置没有可用的源代码，这意味着我无法确切看到标题的更改位置.
EDIT 3: working with redsquare's excellent suggesstions, I've determined that the title attribute is being set sometime after the 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.
编辑4 :(感谢您的耐心等待，并帮助我完成工作！)再次接受redsquare的有关尝试loadComplete事件的评论，我能够成功获取和修改单元格的属性，但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:
loadComplete: function() {
var ids = grid.getDataIDs();
for (var i = 0; i < ids.length; i++) {
grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
}
最终请在下面查看我的答案-在redsquare的帮助下，我能够找到问题的根本原因.
FINAL please see my answer below - I was able to find the root cause of the issue, with help from redsquare.
任何帮助将不胜感激
推荐答案
好的，我在仔细检查了设置的属性后发现了问题.事实证明，我是指头人，没有足够仔细地阅读grid.setCell(...)方法的文档:
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:
此方法可以更改内容 特定的单元格并可以设置类别或 样式属性.其中:•rowid: 该行的ID，
This method can change the content of particular cell and can set class or style properties. Where: •rowid: the id of the row,
•colname:列的名称(此 参数可以是数字开头 从0开始)
•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:如果class是字符串，那么我们添加 使用addClass到单元格的类；如果 class是一个数组，我们设置了新的CSS 通过CSS的属性
•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:设置属性 单元的属性
•properties: sets the attribute properies of the cell
示例:
setCell("10"，税"，''， {color:'red'，'text-align':'center'}'，{title:'Sales 税收"})
setCell("10", "tax", '', {color:'red','text-align':'center'}',{title:'Sales Tax'})
将设置税项字段的内容 在第10行中以红色居中 将标题更改为营业税".
will set the contents of the tax field in row 10 to red and centered and change the title to 'Sales Tax'.
简而言之，我传递给该方法的参数设置的是CSS属性(第4个arg)，而不是属性(第5个arg).结果是添加了两个标题属性，其中一个格式不正确.下面显示了该方法的正确调用，以完成我试图做的事情:
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:
grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});
再次感谢redsquare提供帮助，以解决这个问题！
Thanks again to redsquare for his/her help in solving this!
这篇关于jqGrid 3.4中的自定义数据工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
