GWT ImageCell：在DataGrid或CellTable中动态更改图像

我有DataGrid，其中一列包含图像。我用这段代码生成了这个列

Column<Job, String> expandHideColumn = new Column<Job, String>(
                imageCell) {
            @Override
            public String getValue(Job object) {
                return null;
            }

            @Override
            public void render(Context context, Job Object, SafeHtmlBuilder sb) {
                sb.appendHtmlConstant("<img src='images/expand.jpeg' style='cursor: pointer' />");
            }
}

---

我不认为这是一个很好的方法来改变点击事件的图像。有更好的解决方案吗？

您可以使用列值来了解列的状态：

Column<Job, Boolean> expandHideColumn = new Column<Job, Boolean>(new ImageExpandCollapseCell()) {

   @Override
   public Boolean getValue(Job object) {
      return object.isExpand(); //The object know the expand state ?
   }
}
expandHideColumn.setValueUpdater(new FieldUpdater<Job, Boolean>() {
   void update(int index, Job object, Boolean value) {
     object.setExpand(value);
   }
});

Column expandHideColumn=新列（新图像expandcollapsecell（））{
@凌驾
公共布尔getValue（作业对象）{
return object.isExpand（）；//对象是否知道展开状态？
}
}
expandHideColumn.setValueUpdater（新的FieldUpdater（）{
无效更新（整数索引、作业对象、布尔值）{
setExpand（值）；
}
});

ImageExpandCollapseCell如下所示：

public class ImageExpandCollapseCell extends AbstractCell<Boolean> {
  final String EXPAND = "images/expand.jpeg";
  final String COLLAPSE = "images/collapse.jpeg";

  interface Template extends SafeHtmlTemplates {
    @Template("<div style=\"float:right\"><img src=\"" + url + "\"></div>")
    SafeHtml img(String url);
  }

  private static Template template;

  /**
   * Construct a new ImageCell.
   */
  public ImageCell() {
    super("click"); //Replace your getConsumedEvents()
    if (template == null) {
      template = GWT.create(Template.class);
    }
  }

  @Override
  public void render(Context context, Boolean value, SafeHtmlBuilder sb) {
    if (value != null) {

      sb.append(template.img(UriUtils.fromSafeConstant(value ? EXPAND : COLLAPSE)));
    }
  }

  @Override
  public void onBrowserEvent(Context context, Element element,
          Boolean value, NativeEvent event, ValueUpdater<Boolean> valueUpdater) {
     valueUpdate.update(!value);
  }
}

公共类ImageExpandCollapseCell扩展AbstractCell{
最终字符串EXPAND=“images/EXPAND.jpeg”；
最终字符串COLLAPSE=“images/COLLAPSE.jpeg”；
接口模板扩展了安全HtmlTemplates{
@模板（“”）
安全HTML img（字符串url）；
}
私有静态模板；
/**
*构建一个新的ImageCell。
*/
公共ImageCell（）{
super（“click”）；//替换getConsumedEvents（）
如果（模板==null）{
template=GWT.create（template.class）；
}
}
@凌驾
公共void呈现（上下文上下文、布尔值、安全HtmlBuilder sb）{
if（值！=null）{
sb.append（template.img（UriUtils.fromSafeConstant（value？EXPAND:COLLAPSE））；
}
}
@凌驾
public void onBrowserEvent（上下文、元素、，
布尔值、NativeEvent事件、ValueUpdater ValueUpdater）{
valueUpdate.update（！value）；
}
}

我改进了建议的版本 在render方法中实例化新值不是一个好主意

列渲染方法调用单元格渲染方法，不能替换它

使用FieldUpdater，您可以更改图像的状态：展开或折叠并更新单元格显示（将再次渲染）

Column<Job, Boolean> expandHideColumn = new Column<Job, Boolean>(new ImageExpandCollapseCell()) {

   @Override
   public Boolean getValue(Job object) {
      return object.isExpand(); //The object know the expand state ?
   }
}
expandHideColumn.setValueUpdater(new FieldUpdater<Job, Boolean>() {
   void update(int index, Job object, Boolean value) {
     object.setExpand(value);
   }
});

public class ImageExpandCollapseCell extends AbstractCell<Boolean> {
  final String EXPAND = "images/expand.jpeg";
  final String COLLAPSE = "images/collapse.jpeg";

  interface Template extends SafeHtmlTemplates {
    @Template("<div style=\"float:right\"><img src=\"" + url + "\"></div>")
    SafeHtml img(String url);
  }

  private static Template template;

  /**
   * Construct a new ImageCell.
   */
  public ImageCell() {
    super("click"); //Replace your getConsumedEvents()
    if (template == null) {
      template = GWT.create(Template.class);
    }
  }

  @Override
  public void render(Context context, Boolean value, SafeHtmlBuilder sb) {
    if (value != null) {

      sb.append(template.img(UriUtils.fromSafeConstant(value ? EXPAND : COLLAPSE)));
    }
  }

  @Override
  public void onBrowserEvent(Context context, Element element,
          Boolean value, NativeEvent event, ValueUpdater<Boolean> valueUpdater) {
     valueUpdate.update(!value);
  }
}