Пользовательские подсказки данных в jqGrid 3.4

Question

Я работал с отличным плагином jqGrid, и он прекрасно работает. Недавно, однако, меня попросили реализовать несколько пользовательских подсказок для сетки. Теперь документация очень тщательная, но в ней не рассматривается, как (если это вообще возможно) сделать это.

Вот пример того, что я ищу:

| цв А | col B | ...
| данные | данные | ...
| (наведение мыши) - данные x

Я искал в документации и источнике, как / где определять подсказки, но самое близкое, что я получил, - это настраиваемые подсказки для кнопок в режиме редактирования. У меня есть обработчик события afterInsertRow, благодаря которому я мог получить rowId и тому подобное, но я не уверен, как определить атрибуты HTML в этом событии.

РЕДАКТИРОВАТЬ: чтобы уточнить, я бы хотел установить атрибут заголовка в отдельной ячейке для определенного фрагмента данных (который я уже имею в модели jqgrid)

РЕДАКТИРОВАТЬ 2: я попытался вставить следующее в событие afterInsertRow, без радости, где aData - это модель JSON, а ExpirationDate - имя модели:

afterInsertRow: function(rowid, aData) {
                grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });

следующий код в том же обработчике событий работает, однако:

grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });

РЕДАКТИРОВАТЬ 3: работая с превосходными предложениями redsquare, я определил, что атрибут title устанавливается когда-нибудь после события afterInsertRow: я прошел и определил, что он корректно устанавливается любым метод, описанный в комментариях, но, к сожалению, я получаю исходный код, недоступный для этого местоположения, когда пытаюсь пойти дальше, то есть я не могу точно видеть, где изменяется заголовок.

EDIT 4: (! Спасибо за ваше терпение и помогают мне работать через это) снова принимая комментарий RedSquare о попытке события loadComplete, я смог успешно получить и изменять атрибуты ячейки, но атрибуты названия упорно остается прежний:

loadComplete: function() {
                var ids = grid.getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
                }

ЗАКЛЮЧИТЕЛЬНОЕ РЕДАКТИРОВАНИЕ: посмотрите мой ответ ниже - я смог найти основную причину проблемы с помощью redsquare.

Любая помощь будет оценена

Answer 1

Хорошо, я обнаружил проблему после тщательной проверки установленных свойств. Оказалось, что я, как и я, не достаточно внимательно изучил документацию по методу grid.setCell (...):

Этот метод может изменить содержание конкретная ячейка и может установить класс или свойства стиля. Где: • rowid: идентификатор строки,

• colname: имя столбца (это параметр может начинаться с числа от 0)

• data: контент, который можно поместить в клетку. Если пустая строка содержание не будет изменено

• class: если class является строкой, то мы добавляем класс для ячейки с использованием addClass; если класс это массив, мы устанавливаем новый CSS свойства через css

• свойства: устанавливает атрибут свойства ячейки

Пример:

setCell ("10", "tax", '', {Цвет: «красный», «выравнивания текста»: «центр»} «{название:» Менеджер по продажам Налог '})

установит содержимое поля налога в строке 10 к красному и по центру и измените заголовок на «Налог с продаж».

Короче говоря, аргументы, которые я передавал методу, устанавливали свойства css (4-й аргумент) вместо атрибутов (5-й аргумент). В результате были добавлены два атрибута заголовка, один из которых был неправильно отформатирован. Ниже показан правильный вызов метода для выполнения того, что я пытался сделать:

grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});

Еще раз спасибо redsquare за помощь в решении этой проблемы!

Answer 2

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

N.B Сетка фактически нарушает стандарты, используя целочисленные идентификаторы для строк. Однако следующее должно все еще работать.

$("#gridId").jqGrid({
     ...,
     afterInsertRow : setCellTitle,
     ...
});



function setCellTitle(rowid){
  //get fourth cell in row
  var $cell = $(rowid).children(':eq(3)');
  //set title attribute
  $cell.attr('title', $cell.text());

}

Answer 3

Какую информацию будет отображать подсказка? Предположим, информация всплывающей подсказки находится внутри первой ячейки (скрытой) в строке. Вы можете настроить таргетинг на любую строку в сетке, и, используя метод .live, вы охватите все новые строки.

$('#gridId>tbody>tr').live('mouseover', showTip)
                     .live('mouseoff', hideTip);

function showTip(){

   var $row = $(this);
   //get tooltip from first hidden cell
   var tipText = $row.children(':eq(0)').text()
   //append tipText to tooltip and show

}


function hideTip(){

    //hide tip

}