我可以在jqgrid单元格中更新图像吗 [英] Can I update an image in jqgrid cell

问题描述

我通过各种链接来更新像这里

Hi I have gone through various link to update a cell value like here also here

我需要在用户单击图像后立即更改通过自定义格式化程序放置的图像.所以，我在使用onCellSelect事件，通过该事件获取行的数据

I need to change the image which I put through a custom formatter as soon as user clicks on the image. So, I was using onCellSelect event where I am getting the data of the row by this

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

然后我以此来更改单元格的值-

And then I am changing the value of the cell by this -

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

并通过setRowData

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

所有其他链接表明这是一个可行的解决方案.我什至尝试更改也不适合我的任何字符串列.

All the other links show this is a workable solution. I even tried to change any string column that too it is not working for me.

我还能做什么?

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

Update: For me, setRowData is setting the title for the cell, not the value.

1)我如何添加图像-

1) How I am adding an image -

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

I am using a custom formatter for that-

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

    }

因此，在单元内，我正在放置图像.

So, here inside the cell, I am placing an image.

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

On cell select, I am taking the data and calling a function -

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

现在，我正在检查某种情况，以便将图像应用于其中.

Now here I am checking some condition so to which image needs to be applied.

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应根据条件而变化，并且该变化应反映在与旧图像相同的位置.

So, if the user clicks on an image not in the cell then the image src should change according to the condition and it change should reflect in the same place as the old image.

推荐答案

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

You can use event parameter of onCellSelect callback. event.target will be element, clicked by user. Below is the example of the code:

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单元格中更新图像吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！