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>

これらのウィジェットの多くはページにあります。ボタンがクリックされたときに、左側のテキストボックスを選択して、その値を対応するすべてのウィジェットにコピーできるようにします。

ボタンを選択することはできますが、すぐ左にあるテキストボックスを選択する方法がわかりません。誰でもこれを手伝ってもらえますか？

セレクターはGwtQueryのセレクターに似ている可能性があるため、jQuery-selectorsタグを追加しています。

4

1 に答える 1

2

VerticalPanelまず、domのテキストボックスがどこにあるかを理解できるように、aがどのようにレンダリングされるかを知る必要があります。

VerticalPanelはテーブルとしてレンダリングされ、各ウィジェットは構造に配置されます。<tr><td>widget</td></tr>

あなたの場合、あなたはあなたのボタンの前のものを使用closest()して取得することができます：prev()tr

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

次に、を使用して前の内部find()を取得しますinputtr

$(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);
    }
  });
于 2013-03-27T21:33:28.913 に答える