将两个primefaces输入字段相加到另一个答案

【问题标题】：Sum two primefaces input fileds into another将两个primefaces输入字段相加到另一个
【发布时间】：2015-12-29 10:51:58
【问题描述】：

我想从两个输入字段中获取输入并同时将总和计算到另一个必须可编辑的输入字段（总计）中。我试过这样（我删掉了一些对这个问题无用的代码）：

<p:inputText id="field1"
    value="#{ModelBean.object.field1}"
    onkeydown="#{BackingBean.updateTotal()}">
</p:inputText>

<p:selectOneMenu id="field2" required="true"
    value="#{ModelBean.object.field2}">
    <f:selectItem itemLabel="22 %" itemValue="22" />
    <f:selectItem itemLabel="10 %" itemValue="10" />
    <f:selectItem itemLabel="4 %" itemValue="4" />
    <f:selectItem itemLabel="0 %" itemValue="0" />
</p:selectOneMenu>


<!-- TOTAL -->

<p:inputText id="total"
    value="#{ModelBean.object.total}">
</p:inputText>

如您所见，我将计算任务委托给 BackingBean.update() 方法。它更新总值并将其设置到 bean 的总字段中。我在调试中看到的问题是要求和的两个字段的值为空。在写作时如何让模型变量填充？以及我必须修改什么以让计算结果立即写入总输入字段？

【问题讨论】：

标签： jsf jsf-2 primefaces el

【解决方案1】：

您可以使用 Ajax 而不是这个：

 <p:inputText id="field1" value="#{ModelBean.object.field1}">
          <f:ajax event="change" execute="@this" render="total" listener="#{BackingBean.updateTotal}"></ajax>
 </p:inputText>

 <p:selectOneMenu id="field2" required="true"
          value="#{ModelBean.object.field2}">
          <f:selectItem itemLabel="22 %" itemValue="22" />
          <f:selectItem itemLabel="10 %" itemValue="10" />
          <f:selectItem itemLabel="4 %" itemValue="4" />
          <f:selectItem itemLabel="0 %" itemValue="0" />
          <f:ajax event="change" execute="@this" render="total" listener="#{BackingBean.updateTotal}"></ajax>
 </p:selectOneMenu>


<!-- TOTAL -->

 <p:inputText id="total" value="#{ModelBean.object.total}">
 </p:inputText>

我认为您需要将 ajax 放在两个组件中，因为要根据两者的值来获得总和。如果您不想使用“更改”事件，则可以使用其他 ajax 事件。

【讨论】：

【解决方案2】：

创建项目并包含它

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
      <h:form>
    <h:panelGrid columns="3">
        <h:outputText value="Keyup: " />
        <p:inputText id="counter2" value="#{listenerView.a}">   
            <p:ajax event="keyup" update="out" listener="#{listenerView.handleKeyEvent}"/>
        </p:inputText>
        <p:inputText id="counter" value="#{listenerView.b}">
            <p:ajax event="keyup" update="out" listener="#{listenerView.handleKeyEvent}" />
        </p:inputText>
        <h:outputText id="out" value="#{listenerView.c}" />
    </h:panelGrid>
</h:form>
    </h:body>
</html>

package org.primefaces.showcase.view.ajax;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
 
@ManagedBean
@ViewScoped
public class ListenerView {
     
    private String text;
    private int a;
    private int b;
    private int c;
 
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }
     
    public void handleKeyEvent() {
        c=a+b;
    }

    public int getA() {
        return a;
    }

    public void setA(int a) {
        this.a = a;
    }

    public int getB() {
        return b;
    }

    public void setB(int b) {
        this.b = b;
    }

    public int getC() {
        return c;
    }

    public void setC(int c) {
        this.c = c;
    }
}

【讨论】：

好例子@FaridAhmed！！

【解决方案3】：

如果你想在服务器端使用插入的值来做一些计算，你必须先（部分）提交表单。您可以像这样通过 AJAX 执行此操作：

<p:inputText id="field1"
    value="#{ModelBean.object.field1}">
    <p:ajax event="keyup" listener="#{BackingBean.updateTotal}" update="total"/>
</p:inputText>

<p:selectOneMenu id="field2" required="true"
    value="#{ModelBean.object.field2}">
    <f:selectItem itemLabel="22 %" itemValue="22" />
    <f:selectItem itemLabel="10 %" itemValue="10" />
    <f:selectItem itemLabel="4 %" itemValue="4" />
    <f:selectItem itemLabel="0 %" itemValue="0" />
    <p:ajax listener="#{BackingBean.updateTotal}" update="total"/>
</p:selectOneMenu>

<!-- TOTAL -->
<p:inputText id="total"
    value="#{ModelBean.object.total}">
</p:inputText>

如果计算所需的所有信息都在当前视图中可用并且计算很容易，就像它似乎在这里一样，您也可以考虑通过纯 JavaScript 完全在客户端完成这项工作。

【讨论】：