在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>
您能否让我知道什么是最好的方法来实现这一目标。谢谢!!!
答
首先尝试使用的JavaScript库的名称:jqGrid。在the documentation或the main side的任何地方,您都可以找到以相同形式书写的同一名称。
你的主要问题。看起来你可以使用onCellSelect
回调来捕捉图像上的点击事件,或者只需点击某个单元格。 onCellSelect
回调的e
参数是event object和e.target
将被点击的元素。
The demo演示如何使用它。
我用作用于锁定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>
。
答
@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');
});