Как установить подсказку при наведении курсора мыши на jqGrid?

Question

Как настроить подсказку, которая появляется при наведении курсора мыши на строку / ячейку jqGrid?

В настоящее время подсказка подсказывает только содержимое ячейки.

Answer 1

В целом я согласен с Джастином, что jqGrid не дает вам прямого способа установить всплывающую подсказку для строки, вы можете сделать это только на основе ячейки.Поэтому вы должны сделать это вручную.

Прежде всего вы должны установить свойство title: false для всех ячеек, чтобы не было всплывающей подсказки для ячеек.Затем вы должны установить свои собственные подсказки для каждой строки.Вы можете сделать это, например, внутри loadComplete дескриптора события.Соответствующий код может быть примерно следующим:

loadComplete: function() {
    var ids = grid.jqGrid('getDataIDs');
    for (var i=0;i<ids.length;i++) {
        var id=ids[i];
        var rowData = grid.jqGrid('getRowData',id);
        $('#'+id,grid[0]).attr('title', rowData.Name + ' (' +
                                        rowData.Category + ', ' +
                                        rowData.Subcategory + ')');
    }
}

Вы можете увидеть соответствующий пример, который вы можете видеть в реальном времени здесь .

ОБНОВЛЕНО : ВВ более поздних версиях jqGrid есть гораздо более эффективный способ установки пользовательских title.Это использование cellattr (см. ответ для примера) или rowattr (см. ответ ).Я рекомендую всегда использовать gridview: true опцию jqGrid.Использование cellattr или rowattr вместе с gridview: true позволяет создать полное тело сетки, включающее все подсказки, которые необходимы в одной модификации страницы (полный HTML-фрагмент тела сетки, включающийвсе всплывающие подсказки будут присвоены свойству innerHTML).Использование .attr в цикле следует по крайней мере до reflow , которое является обширным (см. здесь ).Таким образом, использование cellattr и rowattr в сочетании с gridview: true позволяет добиться максимальной производительности.

Answer 2

У меня была похожая проблема, когда jQuery просто не распознал наведение мыши, даже если класс был установлен правильно. В качестве теста я настроил

$('.note).mouseover(function(){alert('hello')})

Нет результатов. Затем я изменил его на

$('.note').live('mouseover',function(){alert('hello')})

и это сработало. Это было все о порядке загрузки. Надеюсь, это поможет.

Answer 3

Для этого не существует API jqGrid.Если вы хотите изменить текст всплывающей подсказки, вам нужно будет написать код, чтобы вручную изменить значение элемента title ячейки.

Answer 4

Чтобы выделить и назначить всплывающую подсказку для всей строки, используя jqgrid 4.4 и IE 11, это работает.

1. отключить подсказку во всех ячейках при определении colModel, например:

   colModel: [{name: 'ColumnName', title: false}, ...

2. назначить метод loadComplete для сетки:

   loadComplete: function () {
   var rows = $(this).getDataIDs();
   
   for (var i = 0; i < rows.length; i++) {
       var row = $(this).getRowData(rows[i]);
       if (row.IsSomething == 'true') {
           this.rows[i + 1].className = this.rows[i + 1].className + ' ui-state-highlight';
           $(this.rows[i + 1]).attr('title', 'This tooltip will appear for the entire row');
       }
   }
   

   } }

Answer 5

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

Чтобы выбрать конкретный td или cell, мы могли бы создать наш собственный класс / атрибут, используя свойство cellattr в качестве функции для любой ячейки. Например:

cellattr: function(rowID,val,rawObject,cm,rdata) {
    return "class='tooltip-cell';" // could return 'n' number of attributes
}

Затем, наконец, функция начальной загрузки tooltip может быть вызвана для одного или набора cells/td:

$('#myGrid .tooltip-cell').tooltip({
            container:'body',
            placement: 'bottom',
            title: 'Click to edit',
            trigger: 'hover'
        });

container:body необходимо использовать для поддержки поведения html таблиц.

Answer 6

Используйте пользовательский форматер

        function myCellFormatter(cellvalue, options, rowObject) {           
                return '<span title="' + rowObject.name + rowObject.category +rowObject.subcategory +'">'+ cellvalue +'</span>';

        }

И затем используйте этот форматер в модели col

{index: 'name', name: 'name',formatter:myCellFormatter, label: 'Name'},
...