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

Ответ 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 + ')');
    }
}

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

Ответ 4

Использовать собственный форматтер

        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'},
...

Ответ 5

Я хотел бы расширить свой ответ на использование bootstrap tooltip с помощью 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.

Ответ 6

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

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

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

• назначить метод 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');
      }
  }
  

  } }