2015-10-03 2 views
0

Я разрабатываю систему, в которой пользователь выбирает некоторые флажки, и каждый флажок имеет значение валюты, и я хочу изменить выходной текст в соответствии с выбранными флажками.Как изменить значение outputText?

Пример: У меня есть три флажка, каждый из которых имеет 10,00 долларов США. Если пользователь выбирает только два флажка, выходной текст должен показывать $ 20,00. Если пользователь выбирает последний, выходной текст должен показывать 30,00 $. И все это без перезагрузки страницы.

Мой код до сих пор:

<h:form id="form"> 
    <p:fieldset legend="Tipo base do site:" style="margin-bottom:20px"> 
     <h:panelGrid columns="2" cellpadding="5"> 
      <p:dataList value="#{tiposIndexView.tipos}" var="tipo" 
      type="ordered" > 
       R$ 
       <h:outputText value="#{tipo.preco}" > 
        <f:convertNumber pattern="#0.00" /> 
       </h:outputText> 
      </p:dataList> 
      <p:selectOneRadio id="tipo" value="#{tiposIndexView.tipos}" 
        layout="grid" columns="1"> 
        <f:selectItems value="#{tiposIndexView.tipos}" var="tipo" 
         itemLabel="#{tipo.nome}" itemValue="#{tipo.nome}" /> 
      </p:selectOneRadio> 
     </h:panelGrid> 
    </p:fieldset> 

    <p:fieldset legend="Sistemas adicionais:" style="margin-bottom:20px"> 
     <h:panelGrid columns="2" cellpadding="5"> 
      <p:dataList value="#{sistemasIndexView.sistemas}" var="sistema" 
      type="ordered" > 
       R$ 
       <h:outputText value="#{sistema.preco}" > 
        <f:convertNumber pattern="#0.00" /> 
       </h:outputText> 
      </p:dataList> 
      <p:selectManyCheckbox style="margin-top:0px;!important" id="grid" value="#{sistemasIndexView.sistemas}" layout="grid" columns="1"> 
       <f:selectItems value="#{sistemasIndexView.sistemas}" var="sistema" itemLabel="#{sistema.nome}" itemValue="#{sistema}" /> 
      </p:selectManyCheckbox> 
     </h:panelGrid> 
    </p:fieldset> 

    <p:fieldset legend="Valor total:"> 
     <h:outputText> 
      R$ 
      <f:convertNumber pattern="#0.00" /> 
     </h:outputText> 
    </p:fieldset> 
</h:form> 

Последние outputText, где я хочу, чтобы показать общую стоимость.

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

@ManagedBean 
@ViewScoped 
public class SistemasIndexView implements Serializable{ 
    private static final long serialVersionUID = -2697991732915561009L; 
    private List<Sistema> sistemas; 

    @PostConstruct 
    public void init(){ 
     sistemas = new ArrayList<>(); 
     sistemas.add(new Sistema("Teste", 200)); 
     sistemas.add(new Sistema("Exemplo", 300)); 
     sistemas.add(new Sistema("gsdfaf", 50)); 
    } 

    public List<Sistema> getSistemas() { 
     return sistemas; 
    } 

    public void setSistemas(List<Sistema> sistemas) { 
     this.sistemas = sistemas; 
    } 
} 
+0

Если вы используете JQuery это просто достичь. Разрешено ли вам это использовать? – NightsWatch

+0

Я могу выбрать язык этой системы, но я действительно хочу изучить JSF. :) –

+0

Значение по умолчанию для флажков зависит от истины/false в вашем бэкэнде, вы не предоставили код, поэтому мы можем только догадываться, что ваши значения по умолчанию являются «истинными». Вы хотите сохранить общее количество в бэкбоне? – Geinmachi

ответ

1

Вам нужно 2 списка, один для хранения всех флажков и второй для выбранных. Вот почему вы выбрали все флажки, потому что ваши выбранные значения совпадают со всеми возможными.

Css ошибка: style="margin-top:0px;!important" должна быть style="margin-top:0px !important;"

вещей вам нужно в бэк-бобе (с добытчиками/Сеттера):

  • Список для выбранных элементов
  • поля для расчетной суммы private int sum
  • Метод расчета выхода public void calculateSum()

Код

<p:selectManyCheckbox style="margin-top:0px !important;" id="grid" value="#{sistemasIndexView.selectedSistemas}" layout="grid" columns="1"> 
     <f:selectItems value="#{sistemasIndexView.sistemas}" var="sistema" itemLabel="#{sistema.nome}" itemValue="#{sistema}" /> 
     <p:ajax process="@this" listener="#{test.calculateSum}" update="sum"/> 
</p:selectManyCheckbox> 

<h:outputText id="sum" value="#{test.sum}"> 
     <f:convertNumber pattern="#0.00" /> 
</h:outputText> 

и метод расчета, вы можете изменить его, но от того, что вы написали, что делает работу

public void calculateSum() { 
    sum = selectedSistemas.size() * 10; 
} 
Смежные вопросы