it-roy-ru.com

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

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

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

15
Marcus Leon

В целом я согласен с Джастином, что 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 + ')');
    }
}

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

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

23
Oleg

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

2
Justin Ethier

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

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

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

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

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

2
EWPDesign

Это работает, чтобы выделить и назначить всплывающую подсказку для всей строки, используя 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');
        }
    }
    

    } }

1
Tom Regan

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

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

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

0
Suhail Gupta