3

我一直在使用出色的 jqGrid 插件，而且效果很好。不过最近，我被要求为网格实现一些自定义工具提示。现在，文档非常详尽，但没有说明如何（如果可能的话）实现这一点。

这是我正在寻找的示例：

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

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

编辑：澄清一下，我想将单个单元格上的 title 属性设置为特定的数据（我已经在 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 事件之后的某个时间设置的：我已经通过并确定它是通过评论中概述的任何一种方法正确设置的，但不幸的是，我尝试更进一步时，无法获取此位置的源代码，这意味着我无法确切看到更改标题的位置。

编辑 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 的帮助下，我能够找到问题的根本原因。

任何帮助，将不胜感激

4

3 回答 3

13

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

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

•colname：列名（该参数可以是从0开始的数字）

•data：可以放入单元格的内容。如果为空字符串，则内容不会改变

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

•properties：设置单元格的属性properties

例子 ：

setCell("10", "tax", '', {color:'red','text-align':'center'}',{title:'Sales Tax'})

将第 10 行中的税款字段的内容设置为红色并居中，并将标题更改为“销售税”。

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

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

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

于 2009-07-29T18:30:48.693 回答
3

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

}
于 2009-07-29T16:59:46.757 回答
3

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

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

}
于 2009-07-29T17:34:04.070 回答