2013-03-27 3 views
0

У меня есть собственный виджет, похожий на этот, это в основном несколько текстовых полей и кнопок вместе с ними.Как получить значение текстового поля, прилегающего к кнопке с запросом gwt

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

+0

вы можете просто получить 'Element' для' 'Button' (кнопка # getElement'), а затем получить предыдущий родственный элемент для него (' Element # getPreviousSiblingElement')? Возможно, вам придется пройти через несколько предыдущих братьев? –

+0

GWT Query для меня, похоже, не имеет функции предыдущего дочернего элемента. – nikhil

+0

Да, у gquery есть 'prev()'. Вы должны знать, что 'VerticalPanel' обертывает ваши виджеты' tr' и 'td'. См. Мой ответ ниже. –

ответ

2

Ну, сначала вы должны знать, как визуализируется VerticalPanel, так как вы можете выяснить, где находится текстовое поле в dom.

VerticalPanel визуализируется в виде таблицы, и каждый виджет позиционируется в структуру: <tr><td>widget</td></tr>

В вашем случае вы можете использовать closest() и prev(), чтобы получить предыдущий tr вашей кнопки:

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

Затем используйте find(), чтобы получить input внутри предыдущего tr

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

Так, используя gquery способность находить Widgets, код для каждой кнопки в вашем пользовательском интерфейсе может выглядеть следующим образом:

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

Спасибо, это хорошо выглядит, я попробую его немедленно. – nikhil