Использование изображений с пользовательским форматером и cellEdit в jqGrid вызывает ошибку JavaScript - решение

Question

У меня возникла проблема в моем веб-приложении при использовании jqGrid с редактируемыми ячейками (cellEdit: true в настройках) и пользовательским средством форматирования, которое возвращало изображение на основе значения ячейки.

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

Я не углубился в проблему, но, думаю, это как-то связано с тем, как jqGrid применяет изображение с помощью пользовательского форматера или как он пытается получить parentNode.

В любом случае, указав событие onclick на самом изображении, которое вызывает его parentNode и щелкает по нему, можно избежать ошибки.

Например, простой пользовательский форматировщик, который обходит эту ошибку:

function booleanFormatter(cellvalue, options, rowObject){
    if (cellvalue == true){
        return '<img src="checked.png" onclick="this.parentNode.click();"/>';
    }
    else if (cellvalue == false){
        return '<img src="notchecked.png" onclick="this.parentNode.click();"/>';
    }
    else {
        return '';
    }
}

Выдержка из colmodel, которая использует форматер, может быть:

colmodel: [ { name: 'CheckableCell', index: 'CheckableCell', editable: true, formatter: booleanFormatter}]

Answer 1

Да, или вы могли бы достичь того же результата более ненавязчивым, похожим на jQuery способом.Сначала измените функцию форматирования следующим образом:

function booleanFormatter(cellvalue, options, rowObject){
    if (cellvalue == true){
        return '<img src="checked.png" class="imgclickable"/>';
    }
    else if (cellvalue == false){
        return '<img src="notchecked.png" class="imgclickable"/>';
    }
    else {
        return '';
    }
}

Затем добавьте это в список свойств самой сетки (присоединяет функцию к событию gridComplete сетки):

gridComplete: function() {
    jQuery('.imgclickable').click(function() {
        this.parentNode.click();
    });
}