在JQGrid中编辑单元格属性

问题描述：

我是JQ网格的初学者.在我的JQ网格中，我在一列中添加了一个图像作为定位标记.在单击特定单元格时，我只需要更改该单元格的图像即可.我正在向该列添加"clickableTitle"类，并尝试以以下方式访问当前单元格:

I am a beginner in JQ grid. In my JQ grid I have a image in a column added as an anchor tag. Onclick of the particular cell I need to change the image only for that cell. I am adding a class 'clickableTitle' to the column and trying to access the current cell as:

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

这为我提供了以下格式的定位标记，但我无法在运行时更改其图像来源.

This gives me the anchor tag in below format, but I am not able to change its image source at runtime.

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

请让我知道实现此目标的最佳方法是什么.谢谢!!!

Can you please let me know what would be the best way to achieve this. Thanks!!!

答

首先要尝试使用的JavaScript库的名称: jqGrid . 文档或

First of all the name of the JavaScript library which you try to use: jqGrid. Everywhere in the documentation or on the main side you will find the same name written in exact the same form.

您的主要问题.看来您可以只使用onCellSelect回调来捕获图像上的click事件，或者仅单击某个单元格即可. onCellSelect回调的e参数是事件对象和e.target将是被单击的元素.

To your main question. It seems you can just use onCellSelect callback to catch the click event on the image or just a click on some cell. The e parameter of the onCellSelect callback is the event object and the e.target will the the element which was clicked.

演示演示了如何使用它.

我用作该锁的jQuery UI的初始背景图像.

I used as the initial background image of jQuery UI for the lock.

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

单击图像可以通过将<span>元素上的类从"ui-icon-locked"更改为"ui-icon-unlocked"来更改图像:

Clicking on the image changed the image by changing the class on the <span> element from "ui-icon-locked" to "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>中的背景图片，则可以轻松更改代码.

You can easy change the code if you prefer to have <img> instead of background image in <span>.

在JQGrid中编辑单元格属性

相关推荐