Question

我正在使用jqGrid，我想在鼠标悬行时显示工具提示。工具提示必须来自数据库。我的意思是，我想显示一个工具提示包含nombre hwen中的数据，鼠标是id。我有以下代码：

$("#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，但我不知道如何完成此操作

谢谢你！

Answer 1

在单元格上设置工具提示仅仅是相应单元格上title属性的设置。

设置工具提示的最简单，最有效的方法（比如设置任何其他单元属性）是在cellattr上使用colModel。

您可以做的只是在生成服务器的XML中包含工具提示文本。例如，您可以为jqGrid的另一列添加其他数据，但 not 包含网格中的列声明。所以XML数据可以如下所示：

<?xml version='1.0' encoding='utf-8'?>
<rows>
    <page>1</page>
    <total>1</total>
    <records>3</records>
    <row id='x1'>
        <cell><![CDATA[x1]]></cell>
        <cell><![CDATA[Test name 1]]></cell>
        <cell><![CDATA[Test tooltip 1]]></cell>
    </row>
    <row id='x2'>
        <cell><![CDATA[x2]]></cell>
        <cell><![CDATA[Test name 2]]></cell>
        <cell><![CDATA[Test tooltip 2]]></cell>
    </row>
    <row id='x3'>
        <cell><![CDATA[x3]]></cell>
        <cell><![CDATA[Test name 3]]></cell>
        <cell><![CDATA[Test tooltip 3]]></cell>
    </row>
</rows>

读取工具提示信息并将其作为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'
});

如何显示the corresponding demo您将获得所需的结果：

enter image description here

Answer 2

他们的意思是，您可以使用gridComplete事件在加载网格行时启动某些内容。我不知道您想使用哪个工具提示库，但我认为qTip会假设您的需求。我会坚持使用版本2，虽然它是一个开发版本，我现在在生产中使用它一年没有任何问题。

http://craigsworks.com/projects/qtip2/

然后你做了类似的事情：

$("#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
          }
       }        
    });
      });
    }
});

小心！我没有测试它;-)所以你必须自己做一些调试;-)。您可以在http://craigsworks.com/projects/qtip2/docs/

找到qTip的文档

干杯！

jqGrid显示工具提示

2 个答案: