Php jqGrid显示工具提示
我正在使用jqGrid,我想在鼠标悬停在一行上时显示工具提示。工具提示必须来自数据库。我的意思是,我想显示一个包含数据的工具提示,当鼠标在一个id上时,它是在nombre hwen中的。我有以下代码:Php jqGrid显示工具提示,php,jqgrid,tooltip,Php,Jqgrid,Tooltip,我正在使用jqGrid,我想在鼠标悬停在一行上时显示工具提示。工具提示必须来自数据库。我的意思是,我想显示一个包含数据的工具提示,当鼠标在一个id上时,它是在nombre hwen中的。我有以下代码: $("#list").jqGrid({ url: 'grid.php', datatype: 'xml', mtype: 'GET', deepempty: true , colNames: ['Id','Nombre'], colModel: [
$("#list").jqGrid({
url: 'grid.php',
datatype: 'xml',
mtype: 'GET',
deepempty: true ,
colNames: ['Id','Nombre'],
colModel: [
{name:'id', index:'id', width:55, title:false},
{name:'nombre', index:'nombre', width:150, sortable:false, title:false}
],
pager: '#pager',
rowNum: 30,
//rowList:[10,20,30],
sortname: 'nombre',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Examenes'
我读到我可以使用gridComplete
,但我不知道如何做到这一点
谢谢大家! 它们的意思是,当网格中的行被加载时,您可以使用
gridComplete
事件启动某些内容。我不知道您希望使用哪个工具提示库,但我认为qTip将假定您的需要。我会坚持使用版本2,尽管它是一个开发版本,但我在生产中使用它一年了,没有任何问题
然后你做一些类似的事情:
$("#list").jqGrid({
url: 'grid.php',
datatype: 'xml',
mtype: 'GET',
deepempty: true ,
colNames: ['Id','Nombre'],
colModel: [
{name:'id', index:'id', width:55, title:false},
{name:'nombre', index:'nombre', width:150, sortable:false, title:false}
],
pager: '#pager',
rowNum: 30,
//rowList:[10,20,30],
sortname: 'nombre',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Examenes'
gridComplete : function() {
$('tr', this).each(function(key, item) {
var rowId = $(item).prop('id');
$(item).qTip({
content: {
text: 'Loading...', // The text to use whilst the AJAX request is loading
ajax: {
url: '/some/url.php', // URL to the local file
type: 'GET', // POST or GET
data: {
'rowId' : rowId
} // Data to pass along with your request
}
}
});
});
}
});
小心!我没有测试;-)因此,您可能需要自己进行一些调试;-)。您可以在此处找到qTip的文档
干杯 在单元格上设置工具提示只不过是在相应单元格上设置
title
属性
设置工具提示(与设置任何其他单元格属性一样)最简单、最有效的方法是在colModel
上使用cellattr
您可以做的只是在生成服务器的XML中包含工具提示文本。例如,您可以为jqGrid的另一列放置附加数据,但不能在网格中包含列声明。因此,XML数据可以如下所示:
$("#list").jqGrid({
url: 'grid.php',
colNames: ['Id', 'Nombre'],
colModel: [
{name: 'id', index: 'id', width: 55, title: false},
{name: 'nombre', index: 'nombre', width: 150, sortable: false, title: false,
cellattr: function (rowId, cellValue, rowObject) {
return ' title="' + $(rowObject).find('cell:eq(2)').text() + '"';
}}
],
pager: '#pager',
rowNum: 30,
sortname: 'nombre',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: 'auto',
caption: 'Examenes'
});
1.
1.
3.
读取工具提示信息并将其作为title
属性值的相应jqGrid代码如下:
$("#list").jqGrid({
url: 'grid.php',
colNames: ['Id', 'Nombre'],
colModel: [
{name: 'id', index: 'id', width: 55, title: false},
{name: 'nombre', index: 'nombre', width: 150, sortable: false, title: false,
cellattr: function (rowId, cellValue, rowObject) {
return ' title="' + $(rowObject).find('cell:eq(2)').text() + '"';
}}
],
pager: '#pager',
rowNum: 30,
sortname: 'nombre',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: 'auto',
caption: 'Examenes'
});
如何显示您将获得所需的结果:
嘿,非常感谢。在你的帮助下,我做到了,但我有一个问题,我的数据是htm格式的,所以当工具提示显示我看到hello world..等时,有没有办法消除标记,但在工具提示中使用html格式?非常感谢你!嘿,谢谢你!!我试过了,但是当我试过的时候,我在qgrid中得到了一条消息。。。我正在阅读文档,但我有2个问题,1是/url.php所指的?那么,评论//数据的传递意味着什么呢?非常感谢你!url/some/url是应该返回工具提示数据的url。在请求中传递rowid,以便PHP脚本知道它必须返回哪个工具提示文本。我向您展示了这个示例,因为您说希望从ajax加载工具提示。这就是它的工作原理。要传递的数据是渲染正确文本以在工具提示中显示该文本所需的参数。祝你好运