Question

我一直在使用优秀的jqGrid插件，效果很好。最近，我被要求为网格实现一些自定义工具提示。现在，documentation非常彻底，但它没有解决如何（如果可能的话）完成此任务。

以下是我正在寻找的一个例子：

| col A | col 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的优秀建议，我已经确定在 afterInsertRow事件之后某个时间设置了title属性：我已经逐步完成并确定它正确设置为注释中概述的方法，但不幸的是，当我试图进一步推进时，我得到的源代码不适用于此位置，这意味着我无法确切地看到标题的更改位置。

编辑4 :(感谢您的耐心并帮助我完成此工作！）再次获取redsquare关于尝试loadComplete事件的评论，我能够成功获取并修改单元格的属性，但title属性固执地保持不变：

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：the   行的id，

•colname：列的名称（this   参数可以是数字开头   来自0）

•数据：可以放入的内容   进入牢房。如果是空字符串的话   内容不会改变

•class：如果class是string，那么我们添加   使用addClass的单元格类;如果   class是我们设置新css的数组   属性通过css

•properties：设置属性   细胞的本质

示例：

setCell（“10”，“tax”，''，   {颜色：“红色”，“文本对齐”：“中心”}“ {标题：”销售   税'}）

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

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

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());

}

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

3 个答案: