在JQGrid中编辑单元格属性

我是JQ网格中的初学者。在我的JQ网格中，我在列中添加了一个图像作为锚标签。点击特定的单元格，我只需要为该单元格更改图像。我加入一个类的clickableTitle'柱上，试图访问当前单元格为：在JQGrid中编辑单元格属性

$('.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>

您能否让我知道什么是最好的方法来实现这一目标。谢谢！！！

来源

2012-03-30 Vashu

首先尝试使用的JavaScript库的名称：jqGrid。在the documentation或the main side的任何地方，您都可以找到以相同形式书写的同一名称。

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

The demo演示如何使用它。

enter image description here

我用作用于锁定jQuery的用户界面的初始背景图像。

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>。

来源

2012-03-30 16:32:17 Oleg

@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'); 
});

来源

2012-04-04 07:52:25 Vashu

在JQGrid中编辑单元格属性

回答

相关问题