Jquery jqGrid 3.4中的自定义数据工具提示
我一直在使用优秀的jqGrid插件,它工作得非常好。不过最近,我被要求为网格实现一些自定义工具提示。现在,这个过程非常彻底,但它没有说明如何(如果可能的话)实现这一点 以下是我正在寻找的一个例子: |A列| B列|……Jquery jqGrid 3.4中的自定义数据工具提示,jquery,jqgrid,Jquery,Jqgrid,我一直在使用优秀的jqGrid插件,它工作得非常好。不过最近,我被要求为网格实现一些自定义工具提示。现在,这个过程非常彻底,但它没有说明如何(如果可能的话)实现这一点 以下是我正在寻找的一个例子: |A列| B列|…… |数据|数据|…… |(鼠标悬停)-数据x 我在文档和源代码中搜索了如何/在何处定义工具提示,但我得到的最接近的是编辑模式下按钮的自定义工具提示。我确实有一个afterInsertRow事件的事件处理程序,通过它我可以得到rowId等等,但是我不确定如何在该事件中定义HTML属性
|数据|数据|……
|(鼠标悬停)-数据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!'});
}
loadComplete:function(){
var id=grid.getDataId();
对于(变量i=0;i
最终编辑:请看下面我的答案-在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
}
好的,澄清后你可以试试这个。 它假定要更改的单元格是每行的第四个单元格,并将单元格标题设置为该单元格中的当前文本。根据需要进行更改 注意:网格实际上违反了标准,对行使用整数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());
}
好的,我在仔细检查设置的属性后发现了问题。结果证明,我,我这个笨蛋,没有仔细阅读grid.setCell(…)方法的文档: 此方法可以更改 特定单元格,可以设置类或 样式属性。其中:•rowid: 行的id •colname:列的名称(此 参数可以是开头的数字 从0开始) •数据:可以放置的内容 输入单元格。如果字符串为空 内容不会更改 •类别:如果类别为字符串,则我们添加 使用addClass将类添加到单元格;如果 类是我们设置新css的数组 通过css的属性 •属性:设置属性 细胞的性质 例如: setCell(“10”,“税”, {颜色:'red','text-align':'center'},{标题:'Sales' 税务‘}) 将设置税务字段的内容 在第10行中显示为红色,居中且 将标题更改为“销售税” 简言之,我传递给该方法的参数是设置css属性(第4个参数)而不是属性(第5个参数)。结果是添加了两个标题属性,其中一个格式不正确。下面显示了正确调用该方法以完成我尝试执行的操作:
grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});
再次感谢redsquare在解决此问题方面的帮助!现在尝试一下,我会随时通知您-感谢您到目前为止所花的时间!似乎单元格的标题(默认为单元格的数据)是在该事件触发后设置的,因为我可以更改各种其他属性(背景等)单元格的标题不会更改。我可以使用grid.setCell(…)方法来实现此目的,也可以在将选择器更改为$(“#”+rowid)后使用您的方法。我们正在接近,但仍然没有雪茄!您可以使用loadComplete事件,对行执行each操作,并更改titleattemped和failed-title属性在该事件之后设置。我通过在该事件期间成功更改单元格的背景色来验证我是否获得了正确的元素并修改了谢谢,但我找到了答案——贴在下面……简言之,我是个笨蛋!