0

我有一个像这样的自定义小部件，它基本上是几个文本框和按钮。

<g:VerticalPanel>
    <b:Label>Lower Limit</b:Label>
    <b:TextBox ui:field="lowerLimit" addStyleNames="lowerLimitTextBox"></b:TextBox>
    <b:Button icon="COPY" addStyleNames="copyAll copyAllLower">Copy To All</b:Button>
</g:VerticalPanel>

<g:VerticalPanel>
    <b:Label>Upper Limit</b:Label>
    <b:TextBox ui:field="upperLimit" addStyleNames="upperLimitTextBox"></b:TextBox>
    <b:Button icon="COPY" addStyleNames="copyAll copyAllUpper">Copy To All</b:Button>
 </g:VerticalPanel>

页面上有许多这样的小部件。单击按钮时，我希望能够选择左侧的文本框并将该值复制到所有相应的小部件。

我可以选择按钮，但不知道如何选择左边的文本框。有人能帮忙吗。

我正在添加 jQuery-selectors 标记，因为选择器可能类似于 GwtQuery 的选择器。

4

1 回答 1

2

好吧，首先你必须知道 aVerticalPanel是如何呈现的，这样你才能弄清楚 dom 中的文本框在哪里。

VerticalPanel呈现为表格，每个小部件都定位到一个结构中：<tr><td>widget</td></tr>

在您的情况下，您可以使用closest()并prev()获取tr按钮的上一个：

$(button).closest("tr").prev();

然后使用find()获取input里面的上一个tr

$(button).closest("tr").prev().find("input")

因此，使用 find 的 gquery 功能，WidgetsUI 中每个按钮的代码可能如下所示：

  button.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
      TextBox box = $(button).closest("tr").prev().find("input").widget();
      for (TextBox b :  $(".gwt-TextBox").widgets(TextBox.class) ) {
        b.setValue(box.getValue());
      }
    }
  });

虽然如果你想gquery一次增强所有按钮，一切都简单得多：

  $(".gwt-Button").click(new Function(){
    public void f() {
      String value = $(this).closest("tr").prev().find("input").val();
      $(".gwt-TextBox").val(value);
    }
  });
于 2013-03-27T21:33:28.913 回答