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

您可以使用event回调的onCellSelect参数。 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单元格中的图像

1 个答案: