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

StackOverflow https://stackoverflow.com/questions/1201473

  •  05-07-2019
  •  | 
  •  

Вопрос

Я работал с отличным плагином 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());

}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top