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

Question

您好，我经历了各种 link 来更新像 here also here

这样的单元格值

我需要在用户点击图像后立即更改通过自定义格式化程序放置的图像。所以，我正在使用 onCellSelect 事件，我通过 this

获取行的数据

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);

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

我还能做什么？

更新： 对我来说，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;
        }

    }

因此，在单元格内，我放置了一张图片。

在单元格 select 上，我正在获取数据并调用一个函数 -

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

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

Can I update an image in jqgrid cell

javascript

jquery

jqgrid