0

我的篮子行中有一张图片，我想在点击后更改它。

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

这是网格中的定义：

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

但是以上几行都没有改变图像。

4

1 回答 1

1

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

<img src="..." />

接下来，您不需要使用onClickwith global defined function add2Basket。取而代之的是，您可以使用onCellSelect回调，该回调将在单击网格主体内的任何元素时被调用。您可以使用iCol或e.target.nodeName仅过滤您需要的事件。属性的设置src足以改变图像。

演示

在此处输入图像描述

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

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

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

于 2013-04-15T15:14:22.880 回答