单击后更改网格中的图像

Question

我的篮子里有一张图片，想点击它后就更改了。

我试图以多种方式改变它，但图像保持不变。

这是网格中的定义：

{name:'Basket', index:'Basket', width:7, formatter: basketFormatter, align: 'center', sortable:false, search:false}                  

格式化程序：

function basketFormatter(cellvalue, options, rowObject){  

  var rowId = options.rowId;  

  var basket = '<img src="/img/basket_off.gif" border="0" onClick="add2Basket(this,' + "'" + rowId + "'" + ')"/></a>'; 

  return basket;
}

部分功能

function add2Basket(image, rowId){

  $(image).attr('src', '/img/basket_on.gif');
  $("#list").setCell(rowId, 'Basket', '<img src="basket_on.gif" />');

但以上所有行都不会改变图像。

Answer 1

首先，您需要修复自定义格式化程序，以生成正确的格式化程序HTML片段而无需额外的</a>：

<img src="..." />

接下来，您不需要将onClick与全球定义的函数add2Basket一起使用。而不是你可以使用onCellSelect回调，这将在点击网格体内的任何元素时被调用。您可以使用iCol或e.target.nodeName仅过滤所需的事件。 src属性的设置足以更改图像。

The demo

显示带有标记的小网格，但通过单击标记，您可以将其更改为另一个国家/地区的标记。我使用了以下代码

onCellSelect: function (rowid, iCol, cellContent, e) {
    if (e.target.nodeName.toLowerCase() === "img") {
        $(e.target).attr("src", swapList[$(e.target).attr("src")]);
    }
}

我在swapList中定义哪个标志应该是下一个。