jqGrid 3.4 中的自定义数据工具提示

Question

我一直在使用出色的 jqGrid 插件，它运行良好。不过最近，我被要求为网格实现一些自定义工具提示。现在，documentation 非常彻底，但它没有说明如何（如果可能的话）实现这一点。

这是我正在寻找的示例：

|A 栏 |列 B |...
|数据 |数据 |...
| （鼠标悬停） - 数据 x

我已经搜索了文档和来源以了解如何/在何处定义工具提示，但我得到的最接近的是编辑模式下按钮的自定义工具提示。我确实有 afterInsertRow 事件的事件处理程序 - 通过它我可以获得 rowId 等，但我不确定如何在该事件中定义 HTML 属性。

编辑：澄清一下，我想将单个单元格上的标题属性设置为特定的数据（我已经在 jqgrid 模型中拥有）

编辑 2：我尝试将以下内容插入到 afterInsertRow 事件中，但没有任何乐趣，其中 aData 是 JSON 模型，而 ExpirationDate 是模型名称：

afterInsertRow: function(rowid, aData) {
                grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });

但是，同一事件处理程序中的以下代码确实有效：

grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });

编辑 3：使用 redsquare 的优秀建议，我确定 title 属性是在 afterInsertRow 事件之后的某个时间设置的：我已经通过并确定它被正确设置cmets 中概述的任何一种方法，但不幸的是，当我尝试更进一步时，我得到的源代码不适用于此位置，这意味着我无法确切看到标题被更改的位置。

编辑 4：（感谢您的耐心和帮助我解决这个问题！）再次接受 redsquare 关于尝试 loadComplete 事件的评论，我能够成功获取和修改单元格的属性，但标题属性仍然保持不变：

loadComplete: function() {
                var ids = grid.getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
                }

最终编辑：请在下面查看我的答案 - 在 redsquare 的帮助下，我能够找到问题的根本原因。

任何帮助将不胜感激

Answer 1

好的，我在仔细检查了正在设置的属性后发现了这个问题。事实证明，我是个傻瓜，没有仔细阅读 grid.setCell(...) 方法的文档：

这个方法可以改变内容 特定的单元格，可以设置类或 样式属性。其中： •rowid： 行的id，

•colname：列的名称（此 参数可以是数字开头 从 0)

•data：可以放的内容 进入细胞。如果为空字符串 内容不会改变

•class：如果类是字符串，那么我们添加 使用 addClass 给单元格添加一个类；如果 class 是一个数组，我们设置了新的 css 属性通过 css

•properties：设置属性 细胞特性

例子：

setCell("10", "税", '', {color:'red','text-align':'center'}',{title:'销售 税'})

将设置tax字段的内容 在第 10 行到红色和居中 将标题更改为“销售税”。

简而言之，我传递给方法的参数是设置 css 属性（第 4 个参数）而不是属性（第 5 个参数）。结果是添加了两个标题属性，其中一个格式不正确。下面显示了正确调用该方法来完成我想要做的事情：

grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});

再次感谢 redsquare 帮助解决这个问题！

Answer 2

工具提示会显示什么信息？ 让我们假设工具提示信息可能在该行的第一个单元格（隐藏）内。 您可以定位网格内的任何行，并使用 .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

}

Answer 3

确定后你可以试试这个。 它假定您要更改的单元格是每行中的第四个单元格，并将单元格的标题设置为该单元格中的当前文本。根据需要进行更改。

N.B 网格实际上打破了标准，对行使用整数 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());

}