0

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

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

4

1 回答 1

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的提议版本 在 render 方法中实例化新值不是一个好主意。

列渲染方法调用单元格渲染方法，不可替换！

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

于 2013-09-23T08:51:29.203 回答