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

Question

我有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' />"); 
      } 
} 

我想要的是点击它必须改变的图像。为此，我加上了一个的ImageCell单击处理这样

ImageCell imageCell = new ImageCell() { 

      @Override 
      public Set<String> getConsumedEvents() { 
       Set<String> events = new HashSet<String>(); 
       events.add("click"); 
       return events; 
      } 
}; 

在onBrowserEvent方法我写这篇

@Override 
public void onBrowserEvent(Context context, Element element, 
     Job job, NativeEvent event) { 
    if (element.getFirstChildElement().isOrHasChild(
      Element.as(event.getEventTarget()))) { 
     if (element.getFirstChildElement().getPropertyString("src") 
       .matches("(.*)expand.jpeg")) { 
      element.getFirstChildElement().setPropertyString("src", 
        "images/collapse.jpeg"); 

     } else { 
      element.getFirstChildElement().setPropertyString("src", 
        "images/expand.jpeg"); 
     } 
    } 
} 

我不认为这是对单击事件改变图像的好方法。有更好的解决方案吗？

Answer 1

您可以使用列值知道列的状态：

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

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

我提高user905374 所提出的版本，这不是一个好想法在渲染方法中实例化新值。

列渲染方法调用Cell渲染方法，你无法取代它！

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