Question

我有一个Xpage，其中有几个字段，用户需要输入一个美元金额。我想在用户更改值时计算总计（我们在经典笔记中都做了很多）。

enter image description here

所以我有两个带有美元金额的输入字段。我希望每当用户更改前两个值之一时重新计算最后一个字段。该总字段绑定到表单上的总字段，我不想在用户保存文档之前更改该字段。

我知道我需要在可编辑的字段中写一个on change事件，但之后我不知道该怎么办？

这是muy代码：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.data>
        <xp:dominoDocument var="document1" formName="xpExpenditures"></xp:dominoDocument>
    </xp:this.data>
    <xp:panel id="panel1"><xp:inputText id="inputText4" value="#{document1.Funds01}" style="width:160.00px">
        <xp:this.converter>
            <xp:convertNumber type="currency"></xp:convertNumber>
        </xp:this.converter>
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial">
        </xp:eventHandler>
        </xp:inputText><xp:br></xp:br>+<xp:br></xp:br><xp:inputText id="inputText1" value="#{document1.Funds02}" style="width:160.00px">
        <xp:this.converter>
            <xp:convertNumber type="currency"></xp:convertNumber>
        </xp:this.converter>
        <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="panel1">
        </xp:eventHandler>
    </xp:inputText><xp:br></xp:br>=<xp:br></xp:br><xp:inputText id="inputText9" value="#{document1.Funds08}" style="width:160.00px" disabled="true">
        <xp:this.converter>
            <xp:convertNumber type="number"></xp:convertNumber>
        </xp:this.converter>
    </xp:inputText></xp:panel>
</xp:view>

Answer 1

如果您在客户端上立即计算总金额，而不是每次字段更改时返回到服务器并进行部分刷新，您将获得更好的用户体验：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[
function valueNumber(id) {
    var elem = document.getElementById(id);
    var val = elem.value ? (+(elem.value.replace("$", ""))).toFixed(2) : "";
    elem.value = val ? "$" + val : "";
    return +val;
}
calculate = function() {
    var val = valueNumber("#{id:inputTextFunds01}") + valueNumber("#{id:inputTextFunds02}");
    val = val ? "$" + val.toFixed(2) : "";
    document.getElementById("#{id:inputTextFunds08}").value = val;
    document.getElementById("#{id:inputTextDisabled}").value = val;
}]]></xp:this.script>
    </xp:eventHandler>
    <xp:this.data>
        <xp:dominoDocument
            var="document1"
            formName="xpExpenditures"></xp:dominoDocument>
    </xp:this.data>
    <xp:panel
        id="panel1">
        <xp:inputText
            id="inputTextFunds01"
            value="#{document1.Funds01}"
            style="width:160.00px">
            <xp:this.converter>
                <xp:convertNumber
                    type="currency"
                    currencySymbol="$">
                </xp:convertNumber>
            </xp:this.converter>
            <xp:eventHandler
                event="onchange"
                submit="false">
                <xp:this.script><![CDATA[calculate();]]></xp:this.script>
            </xp:eventHandler>
        </xp:inputText>
        <xp:br></xp:br>
        +
        <xp:br></xp:br>
        <xp:inputText
            id="inputTextFunds02"
            value="#{document1.Funds02}"
            style="width:160.00px">
            <xp:this.converter>
                <xp:convertNumber
                    type="currency"
                    currencySymbol="$">
                </xp:convertNumber>
            </xp:this.converter>
            <xp:eventHandler
                event="onchange"
                submit="false">
                <xp:this.script><![CDATA[calculate();]]></xp:this.script>
            </xp:eventHandler>
        </xp:inputText>
        <xp:br></xp:br>
        =
        <xp:br></xp:br>
        <xp:inputText
            id="inputTextFunds08"
            value="#{document1.Funds08}"
            style="display:none">
            <xp:this.converter>
                <xp:convertNumber
                    type="currency"
                    currencySymbol="$">
                </xp:convertNumber>
            </xp:this.converter>
        </xp:inputText>
        <xp:inputText
            id="inputTextDisabled"
            value="#{document1.Funds08}"
            style="width:160.00px"
            disabled="true">
        </xp:inputText>
    </xp:panel>
    <xp:button
        value="Save"
        id="button1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete"
            immediate="false"
            save="true"></xp:eventHandler>
    </xp:button>
</xp:view>

此代码将总金额写入字段＆＃39;更改为可见但已禁用字段＆＃34; inputTextDisabled＆＃34;并进入隐藏但可编辑的字段＆＃34; inputTextFunds08＆＃34;。两者都与文档＆＃34; Funds08＆＃34;相关联。这样，它就会在提交时以新的总金额保存。

上面的示例适用于货币＆＃34; $＆＃34;。如果将字段转换为数字字段而不是货币字段，则代码会更容易，而货币符号将被放置在字段之外。

Answer 2

使用您描述的方式：

在两个字段中，在onChange事件中进行部分刷新。（如果还有其他字段，则部分刷新必须位于要进行更新的所有字段中。）建议将结果字段放在单独的面板中并更新该面板。面板应包含要更新的字段，但不包含用于计算值的可编辑字段。最好将它们分开，如果你只有一个，那么你可以更新字段而不是面板。

供考虑：

尽管上述方法没有任何问题，但请考虑使用托管bean来存储对象并更新页面上的字段。您可以将逻辑保存在一个位置，并轻松地动态计算值。您只需修改getter方法，只要其他字段发生变化就可以计算。您不需要setter方法。

请在此处查看此答案。 Best Practice to update computed fields on an xpage using managed beans

这是我的经验教训的摘要博客文章：http://notesspeak.blogspot.com/2013/06/dynamic-computed-values-in-xpage.html 这假定结果是“计算”而不是代码中的编辑框，我假设您希望计算结果不可编辑。

在这两种方法中，您仍然需要保存数据，因此除非您专门更新后端，否则后端尚未更新。

Xpages - 当其他字段的值更改时重新计算字段

2 个答案: