jqGrid показать подсказку

Question

Я использую jqGrid и хочу показать всплывающую подсказку, когда мышь находится над строкой.Подсказка должна исходить из базы данных.Я имею в виду, что я хотел бы показать всплывающую подсказку, содержащую данные, которые находятся в определенном порядке, когда мышь находится над идентификатором.У меня есть следующий код:

$("#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, но не включает объявление столбца в сетке. Таким образом, данные 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>

Соответствующий код jqGrid, который считывает информацию всплывающей подсказки и помещает ее в качестве значения атрибута title, будет следующим:

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

Как показывает соответствующее демо у вас будут результаты, которые вам нужны:

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

Будьте осторожны!Я не проверял это ;-) Так что вы, вероятно, должны сделать некоторую отладку самостоятельно ;-).Вы можете найти документацию для qTip здесь http://craigsworks.com/projects/qtip2/docs/

Cheers!