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，您可以更改圖像的狀態：展開或摺疊並更新單元格顯示（它將再次呈現）。