2015-10-03 245 views
0

我正在开发一个系统,用户选择一些复选框,每个复选框都有一个货币值,我想根据选中的复选框更改outputText。如何更改outputText的值?

例如:我有三个复选框,每个都有$ 10.00。如果用户只选择两个复选框,则outputText必须显示$ 20.00。如果用户选择最后一个,outputText必须显示$ 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

复选框的默认值取决于您的支持bean中的true/false,您没有提供代码,因此我们只能猜测您的默认值为“true”。你想把总数存储在后台bean中吗? – Geinmachi

回答

1

您需要2个列表,一个用于存储所有复选框,另一个用于选定的复选框。这就是为什么您选中所有复选框,因为您选择的值与所有可能的相同。

的CSS错误:style="margin-top:0px;!important"应该style="margin-top:0px !important;"

事情你在支撑bean需要(与getter/setter方法):

  • 名单选定项目
  • 场的计算和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; 
}