在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回调来捕获图像上的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>.