我可以更新 jqgrid 单元格中的图像吗

Question

您好，我已经通过各种链接更新单元格值，例如 here 和 here

只要用户点击图像，我就需要更改通过自定义格式化程序放置的图像。所以，我使用了 onCellSelect 事件，我通过这个来获取行的数据

var data = $(this).jqGrid('getRowData', row);

然后我通过这个来改变单元格的值 -

image = "results_not_available.png";
data.colyesno = "<img title ='Detail data not available' src='img/" + image + "' />";

通过setRowData更新单元格值

$(this).jqGrid('setRowData', row, data);

所有其他链接都表明这是一个可行的解决方案。我什至尝试更改任何对我不起作用的字符串列。

我还能做什么？

更新：对我来说，setRowData 是设置单元格的标题，而不是值。

1) 我如何添加图像 -

我正在为此使用自定义格式化程序-

function  resultsImage(cellValue, options, rowdata, action) {
        var image = "";
        if (cellValue == "Y"){
            image = "results_available.png";
            var imageHtml = "<img class=pointer title ='Detail data available. Click to request for data' src='img/" + image + "' />";
            return imageHtml;
        }       
        else if (cellValue == "N"){
            image = "results_not_available.png";
            var imageHtml = "<img title ='Detail data not available' src='img/" + image + "' />";
            return imageHtml;
        }

    }

所以，在单元格内，我放置了一张图片。

在单元格选择时，我正在获取数据并调用一个函数 -

    onCellSelect: function(row, col, content, event) {
      var cm = jQuery(grid).jqGrid("getGridParam", "colModel");
      columnName = cm[col].name;
      var data = $(this).jqGrid('getRowData', row);
      if(columnName == 'col_image')
         callImage(data,content);
      $(this).jqGrid('setRowData', row, data); 
}

现在我在这里检查一些条件，以便需要应用哪个图像。

var callImage = function (data,content){
    if(condition==true) {    ///which is some variable where we make some request to server and it returns backs a variable
      image = "loading_completed.png";
      data.col_image = "<img title ='Click to view data' src='img/" + image + "' />";
      return data
      };
    else {
      image = "loading_error.png";
      data.col_image = "<img title ='No data available' src='img/" + image + "' />";
      return data
      };
    }

因此，如果用户点击不在单元格中的图像，则图像 src 应根据条件更改，并且更改应反映在与旧图像相同的位置。

Answer 1

你可以使用onCellSelect回调的event参数。 event.target 将是元素，由用户单击。下面是代码示例：

onCellSelect: function (iRow, iCol, content, event) {
    var cmName = $(this).jqGrid("getGridParam", "colModel")[iCol].name,
        target = event.target;

    if (cmName === "col_image" && target.tagName.toUpperCase() === "IMG") {
        if (condition) { // some kind of testing
            target.src = "img/loading_completed.png";
            target.title = "Click to view data";
            // one can use $(target).attr alternatively
            //$(target).attr({
            //    src: "img/loading_completed.png",
            //    title: "Click to view data"
            //});
        } else {
            target.src = "img/loading_error.png";
            target.title = "No data available";
            // one can use $(target).attr alternatively
            //$(target).attr({
            //    src: "img/loading_error.png",
            //    title: "No data available"
            //});
        }
    }
}