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

StackOverflow https://stackoverflow.com/questions/1201473

  •  05-07-2019
  •  | 
  •  

题

我一直在使用优秀的 jqGrid 插件，它运行得很好。不过最近，我被要求为网格实现一些自定义工具提示。现在 文档 非常彻底，但它没有解决如何（如果可能的话）实现这一点。

这是我正在寻找的示例：

| Col A | Col 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 的出色建议，我确定标题属性有时会被设置 后 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 的帮助下，我能够找到问题的根本原因。

任何帮助，将不胜感激

有帮助吗？

解决方案

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

此方法可以更改 特定单元格，可以设置类或 样式属性。在哪里：•行号：这 行的 id，

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

•数据：可以放的内容 进入细胞。如果空字符串， 内容不会更改

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

•特性：设置属性 细胞的属性

例子 ：

setCell（“10”， “税”， ''， {color：'红色'，'text-align'：'center'}'，{title：'销售 税'}）

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

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

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

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

其他提示

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

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

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

}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top