如何将单击处理程序添加到Celltable ImageCell？

Posted 2021-05-05

如何向ImageCell添加点击处理程序？这就是我所拥有的：

ImageCell btn= new ImageCell();
Column<Contact,String> column = new Column<Contact,String>(btn) 
{
    @Override
    public String getValue(Contact c) 
    {
        return c.imageLocation;
    }
};
column.setFieldUpdater(new FieldUpdater<Contact,String>()
{
    public void update(int index, Contact c, String value) 
    {   
        Window.alert("clicked");
    }           
});

答案

这也有效。

// clickable imageresource cell
public class ClickableImageResourceCell extends AbstractCell<ImageResource> {
    private static ImageResourceRenderer renderer;

    public ClickableImageResourceCell () {
        super(BrowserEvents.CLICK);
        if (renderer == null) {
            renderer = new ImageResourceRenderer();
        }
    }

    @Override
    public void onBrowserEvent(Context context, final Element parent, ImageResource value, NativeEvent event,
            ValueUpdater<ImageResource> valueUpdater) {
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        if (BrowserEvents.CLICK.equals(event.getType())) {
            onEnterKeyDown(context, parent, value, event, valueUpdater);
        }
    }

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context,
            ImageResource value, final SafehtmlBuilder sb) {
          sb.append(renderer.render(value));
    }

    @Override
    protected void onEnterKeyDown(Context context, Element parent, ImageResource value, NativeEvent event,
            ValueUpdater<ImageResource> valueUpdater) {
        if (valueUpdater != null) {
            valueUpdater.update(value);
        }
    }
}

另一答案

也许这有帮助：Adding clickHandler to row in CellTable in GWT?。它不是单元格上的clickhandler，而是单元格表（或列表）上的clickhandler。哪个更有效率。

另一答案

我通过创建自己的ButtonCell类解决了这个问题。以下是我的代码：

import com.google.gwt.cell.client.AbstractSafeHtmlCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.text.shared.SafeHtmlRenderer;
import com.google.gwt.text.shared.SimpleSafeHtmlRenderer;

/**
 * A {@link Cell} used to render a button.
 */
public class ClickImage extends AbstractSafeHtmlCell<String> {

  /**
   * Construct a new ButtonCell that will use a {@link SimpleSafeHtmlRenderer}.
   */
  private String bgImage="";
  public ClickImage() 
  {
    this(SimpleSafeHtmlRenderer.getInstance());
  }
  public ClickImage(String bgImage) 
  {
    this(SimpleSafeHtmlRenderer.getInstance());
    this.bgImage=bgImage;
  }

  public String getBgImage() 
  {
    return bgImage;
  }
  public void setBgImage(String bgImage) 
  {
    this.bgImage = bgImage;
  }
/**
   * Construct a new ButtonCell that will use a given {@link SafeHtmlRenderer}.
   * 
   * @param renderer a {@link SafeHtmlRenderer SafeHtmlRenderer<String>} instance
   */
  public ClickImage(SafeHtmlRenderer<String> renderer) {
    super(renderer, "click", "keydown");
  }

  @Override
  public void onBrowserEvent(Context context, Element parent, String value,
      NativeEvent event, ValueUpdater<String> valueUpdater) {
    super.onBrowserEvent(context, parent, value, event, valueUpdater);
    if ("click".equals(event.getType())) {
      onEnterKeyDown(context, parent, value, event, valueUpdater);
    }
  }

  @Override
  public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) 
  {
    String img=getBgImage();
    String disableButton="";
    if(img.equals("transparentButton"))
    {
        disableButton = "disabled="disabled"";
    }
    sb.appendHtmlConstant("<button class=""+img+"" type="button" "+disableButton+" tabindex="-1">");
    if (data != null) {
      sb.append(data);
    }
    sb.appendHtmlConstant("</button>");
  }

  @Override
  protected void onEnterKeyDown(Context context, Element parent, String value,
      NativeEvent event, ValueUpdater<String> valueUpdater) {
    if (valueUpdater != null) {
      valueUpdater.update(value);
    }
  }
}

所以我用一个按钮来显示图像。我使用css使按钮的背景颜色变得透明，而且，当创建按钮时，我将链接作为参数传递给构造函数，这样我就可以创建不同的可点击图像。这对我有用！

另一答案

addButtonCell（“resources / ui / images / download.png”，“下载”，“下载”）;

private void addButtonCell（final String imageSrc，String columnName，final String action）

{
    ActionCell<AttachmentDTO> imageButtonCell = new ActionCell<AttachmentDTO>("", new Delegate<AttachmentDTO>()
        {
           @Override
           public void execute(final AttachmentDTO object)
           {
               if(action.equalsIgnoreCase("download"))
               {
                   download(object);
               }
               else
               {
                   eventBus.fireEvent(new ImgButtonClickEvent(object));
               }
           }
        })
        {
           @Override
           public void render(Context context, AttachmentDTO value, SafeHtmlBuilder sb)
           {
                 Image icon = new Image(imageSrc);
                 SafeHtmlBuilder builder = new SafeHtmlBuilder();
                 builder.appendHtmlConstant(icon.toString());
                 sb.append(builder.toSafeHtml());
           }
        };
    final Column<AttachmentDTO, AttachmentDTO> column = new Column<AttachmentDTO, AttachmentDTO>(imageButtonCell) 
       {
            @Override
            public AttachmentDTO getValue(AttachmentDTO object) 
            {
                return object;
            }
       };
    cellTable.addColumn(column, columnName); 
    column.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    cellTable.setColumnWidth(column, "80px");   
}