javascript - 我可以更新 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 应根据条件进行更改，并且更改应反射(reflect)在与旧图像相同的位置。

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"
            //});
        }
    }
}