如何使用gwt查詢獲取與按鈕相鄰的文本框的值

Question

我有一個像這樣的自定義小部件，它基本上是幾個文本框和按鈕。

<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。

Answer 1

好吧，首先你必須知道如何渲染VerticalPanel ，以便你可以找出dom中文本框的位置。

VerticalPanel呈現為一個表，每個小部件都定位在一個結構中： <tr><td>widget</td></tr>

在您的情況下，您可以使用closest()和prev()來獲取按鈕的前一個tr ：

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

然后使用find()獲取前一個tr內的input

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

因此，使用gquery查找Widgets能力，UI中每個按鈕的代碼可能如下所示：

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