Всплывающие подсказки пользовательских данных в jqGrid 3.4
Вопрос
Я работал с отличным плагином jqGrid, и он отлично работает.Однако недавно меня попросили реализовать некоторые пользовательские всплывающие подсказки для сетки.Теперь, в Документация является очень подробным, но в нем не рассматривается, как (если это вообще возможно) этого добиться.
Вот пример того, что я ищу:
|кол А | кол Б |...
| данные | data |...
| (наведение курсора мыши) - данные x
Я просмотрел документацию и исходные тексты, чтобы узнать, как / где определять всплывающие подсказки, но самое близкое, что я получил, - это пользовательские всплывающие подсказки для кнопок в режиме редактирования.У меня есть обработчик событий для события afterInsertRow - с помощью него я мог бы получить rowId и тому подобное, но я не уверен, как определить HTML-атрибуты в этом событии.
Редактировать:чтобы уточнить, я хотел бы установить атрибут title для отдельной ячейки для определенного фрагмента данных (который у меня уже есть в модели 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 после вставки:Я прошел через это и определил, что оно правильно устанавливается любым методом, описанным в комментариях, но, к сожалению, при попытке сделать следующий шаг, я получаю сообщение о том, что исходный код недоступен для этого местоположения, что означает, что я не могу точно видеть, где изменяется заголовок.
ПРАВКА 4:(спасибо за ваше терпение и помощь мне в работе с этим!) снова принимая комментарий redsquare о попытке события loadComplete, я смог успешно получить и изменить атрибуты ячейки, но атрибут title упрямо остается неизменным:
loadComplete: function() {
var ids = grid.getDataIDs();
for (var i = 0; i < ids.length; i++) {
grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
}
ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ:пожалуйста, смотрите мой ответ ниже - я смог найти первопричину проблемы с помощью redsquare.
Будем признательны за любую помощь
Решение
Хорошо, я обнаружил проблему после тщательной проверки устанавливаемых свойств.Оказывается, я, какой бы я ни был тупица, недостаточно внимательно прочитал документацию по методу grid.setCell(...):
Этот метод может изменять содержимое определенной ячейки и может устанавливать свойства класса или стиля.Где:•идентификатор строки: идентификатор строки,
•имя столбца:название столбца (этим параметром может быть число, начинающееся с 0)
•данные:содержимое, которое можно поместить в ячейку.Если строка пустая, то содержимое не будет изменено
•класс:если class является строкой, то мы добавляем класс в ячейку с помощью addClass;если класс представляет собой массив, мы устанавливаем новый css свойства через css
•свойства:задает атрибут свойства ячейки
Пример :
setCell("10", "налог", ", {цвет: 'красный','выравнивание текста': 'по центру'}',{заголовок: 'Продажи Налог'})
установит содержимое налогового поля в строке 10 красным по центру и измените заголовок на "Налог с продаж".
Короче говоря, аргументы, которые я передавал в метод, устанавливали свойства css (4-й аргумент) вместо атрибутов (5-й аргумент).В результате были добавлены два атрибута заголовка, причем один из них был неправильно отформатирован.Ниже показан правильный вызов метода для выполнения того, что я пытался сделать:
grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});
Еще раз спасибо redsquare за его / ее помощь в решении этой проблемы!
Другие советы
Какую информацию будет отображать всплывающая подсказка?Давайте предположим, что информация о всплывающей подсказке, возможно, находится внутри первой ячейки (скрытой) в строке.Вы могли бы настроить таргетинг на любую строку внутри сетки и, используя .метод 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
}
хорошо, после прояснения вы могли бы попробовать это.Предполагается, что ячейка, которую вы хотите изменить, является четвертой в каждой строке, и заголовок ячейки присваивается текущему тексту в этой ячейке.Меняйте по мере необходимости.
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());
}