Изменить свойства ячейки в JQGrid

Question

Я новичок в сетке JQ. В моей сетке JQ у меня есть изображение в столбце, добавленное в качестве тега привязки. При нажатии на конкретную ячейку мне нужно изменить изображение только для этой ячейки. Я добавляю класс «clickableTitle» в столбец и пытаюсь получить доступ к текущей ячейке как:

$('.clickableTitle').live('click', function () {
    $(this).parents('table:first').getCell($(this).parents('tr:first').attr('id'), 'comment'));
 });

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

<A href="Proj.aspx?PID=795&Store=#Comment"><IMG class=commentIcon src="/_Layouts/images/iconCommentOn.png"></A>

Не могли бы вы, пожалуйста, дать мне знать, как лучше всего это сделать. Спасибо !!!

Answer 1

Прежде всего имя библиотеки JavaScript, которую вы пытаетесь использовать: jqGrid .Повсюду в документации или на главной стороне вы найдете одно и то же имя, написанное точно в той же форме.

К вашему основному вопросу.Кажется, вы можете просто использовать onCellSelect callback, чтобы поймать событие click на изображении, или просто щелкнуть мышью по какой-либо ячейке.Параметр e обратного вызова onCellSelect является объектом события , а e.target будет элементом, по которому был выполнен щелчок.

Демонстрация показываетВы можете использовать его.

Я использовал в качестве исходного фонового изображения jQuery UI для блокировки.

formatter: function () {
    return "<a href='#'><span class='ui-icon ui-icon-locked'></span></a>"
}

Нажатие на изображение изменило изображениеизменив класс элемента <span> с "ui-icon-locked" на "ui-icon-unlocked":

onCellSelect: function (rowid, iCol, cellcontent, e) {
    var $dest = $(e.target), $td = $dest.closest('td');
    if ($td.hasClass("clickableTitle")) {
        if ($dest.hasClass("ui-icon-locked")) {
            $dest.removeClass("ui-icon-locked").addClass("ui-icon-unlocked");
        } else {
            $dest.removeClass("ui-icon-unlocked").addClass("ui-icon-locked");
        }
    }
}

Вы можете легко изменить код, если предпочитаете <img> вместо фонового изображения в <span>.

Answer 2

@ Олег: Спасибо за ваш вклад.Я уверен, что urs - правильный путь, но мне пришлось использовать решение, упомянутое ниже из-за ограничений существующей реализации.