在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 。在the documentation或the main side的任何地方，您都会找到以完全相同的形式书写的相同名称。

对你的主要问题。看来你可以使用onCellSelect回调来捕捉图像上的点击事件，或者只是点击某个单元格。 e回调的onCellSelect参数是event object，e.target将是被点击的元素。

The demo演示了如何使用它。

我用作锁的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

@Oleg：感谢您的投入。我确信urs是正确的方法，但由于现有实施的局限性，我不得不使用下面提到的解决方案。

$('.clickableTitle').live('click', function () { 
    $('body').css('cursor', 'wait'); 
    var commentIconStat = $(this).parents('table:first').getCell($(this).parents('tr:first').attr('id'), 'comment');  
    //Turn read comment off 
    if (commentIconStat.search(/iconCommentOn/i) > -1) { 
        commentIconStat = commentIconStat.replace(/iconCommentOn/i, "iconCommentOff"); 
        $(this).parents('table:first').setCell($(this).parents('tr:first').attr('id'), 'comment', commentIconStat, '')

    } 
    $('body').css('cursor', 'default'); 
});