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

列渲染方法调用Cell渲染方法，你不能替换它！

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

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

1 个答案: