代码之家 › 专栏 › 技术社区 › Josh E

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

jqgrid jquery

Josh E · 技术社区 · 17 年前

我一直在使用优秀的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的优秀建议,我确定某个时候会设置标题属性。之后 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的帮助下找到了问题的根本原因。

任何帮助都将不胜感激

3 回复 | 直到 15 年前

Josh E 17 年前

好吧,我仔细检查了设置的属性后发现了这个问题。事实证明,我,我是个笨蛋,没有仔细阅读grid.setcell(…)方法的文档:

此方法可以更改特定单元格,可以设置类或样式属性。其中:rowid: 行的ID,

_、colname:列的名称(此参数不能是以数字开头的 0)

数据:可以放置的内容进入细胞。如果为空字符串, 内容不会更改

_窆class:如果class是string,那么我们添加使用addClass将类添加到单元格;如果类是一个数组,我们设置了新的CSS 通过CSS的属性

属性:设置属性细胞特性

例子:

setcell(“10”,“税”,“”, 颜色:'red'、'text-align':'center''、标题:'sales 税收“}

将设置税收字段的内容第10行到红色,居中将标题更改为“增值税”。

简而言之,我传递给方法的参数是设置CSS属性(第4个参数),而不是属性(第5个参数)。结果是添加了两个标题属性,其中一个标题属性的格式不正确。下面显示了对方法的正确调用,以完成我试图执行的操作:

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

再次感谢Redsquare在解决这个问题上的帮助!

redsquare 17 年前

工具提示将显示哪些信息? 假设工具提示信息可能位于行中的第一个单元格(隐藏)内。您可以将网格中的任何行作为目标,并使用.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

}

redsquare 17 年前

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

注意:网格实际上使用整数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());

}