Xpages重复绑定数据

时间：2014-09-15 05:28:56

标签： data-binding xpages repeat

我有一个重复控件，里面有一些数据和一个允许用户增加重复行数的按钮。 问题是我不知道用户按下按钮的次数，因此我不知道要在表单中创建多少个字段。我可以创造100个领域，但这不是一个好习惯。有没有办法从CSJS创建特定的表单？或者如何将输入字段从重复绑定到某些表单字段，以便从重复中保存正确的数据？

我把它与EL绑在一起：

<xp:repeat id="repeat1" var="test" indexVar="index"
            value="#{javascript:parseInt(sessionScope.dynaField)}" rows="8"
            style="border:1pt">


            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td style="border:1pt;width:32.0%;text-align:center">
                        <xp:inputText id="inputText1" value="#{docrepeat[field1]}">


                            <xp:eventHandler event="onchange" submit="false">
                                <xp:this.script><![CDATA[try
{
var idx="view:_id1:inputText3";
var index=document.getElementById(idx).value;

var number="view:_id1:number";
var val=document.getElementById(number).value;

var sum = val;

for(var i=0;i<index;i++) {
var input1="view:_id1:repeat1:"+i+":inputText1"
var nr1=document.getElementById(input1).value;

sum-=nr1;
document.getElementById("view:_id1:repeat1:"+i+":inputText2").value = sum;
}

document.getElementById("view:_id1:test").value = (sum*100)/val; 

}
catch(e)
{
alert("no");
}]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:inputText>
                        <xp:inputText id="inputText2">

                        </xp:inputText>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:repeat>

但是我得到一个空指针异常。为什么呢？

P.S。这是整个页面代码：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xp_1="http://www.ibm.com/xsp/coreex">

    <xp:this.beforePageLoad><![CDATA[#{javascript:sessionScope.dynaField=parseInt("1");}]]></xp:this.beforePageLoad>




    <xp:this.data>
        <xp:dominoDocument var="docrepeat" formName="repeat"></xp:dominoDocument>
    </xp:this.data>
    <xp:inputText id="inputText3" defaultValue="1">

        <xp:this.converter>
            <xp:convertNumber type="number" integerOnly="true"></xp:convertNumber>
        </xp:this.converter>
    </xp:inputText>

    <xp:inputText id="number" defaultValue="100">
        <xp:this.converter>
            <xp:convertNumber type="number" integerOnly="true"></xp:convertNumber>
        </xp:this.converter>
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="repeat1">
            <xp:this.script><![CDATA[try
{
var idx="view:_id1:inputText3";
var index=document.getElementById(idx).value;

var number="view:_id1:number";
var val=document.getElementById(number).value;

var sum = val;

for(var i=0;i<index;i++) {
var input1="view:_id1:repeat1:"+i+":inputText1"
var nr1=document.getElementById(input1).value;

sum-=nr1;
document.getElementById("view:_id1:repeat1:"+i+":inputText2").value = sum;
}



}
catch(e)
{
alert("no");
}]]></xp:this.script>
        </xp:eventHandler>
    </xp:inputText>
    <xp:inputText id="test">
        <xp:this.converter>
            <xp:convertNumber type="number" integerOnly="true"
                locale="ro" maxFractionDigits="2">
            </xp:convertNumber>
        </xp:this.converter>
    </xp:inputText>
    <xp:panel id="Panel_All" style="text-align:center">

        <xp:pager layout="Previous Group Next" id="pager1" for="repeat1"
            panelPosition="top">
        </xp:pager>
        <xp:repeat id="repeat1" var="test" indexVar="index"
            value="#{javascript:parseInt(sessionScope.dynaField)}" rows="8"
            style="border:1pt">


            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td style="border:1pt;width:32.0%;text-align:center">
                        <xp:inputText id="inputText1">
                            <xp:this.converter>
                                <xp:convertNumber type="number"></xp:convertNumber>
                            </xp:this.converter>
                            <xp:eventHandler event="onchange"
                                submit="false">
                                <xp:this.script><![CDATA[try
{
var idx="view:_id1:inputText3";
var index=document.getElementById(idx).value;

var number="view:_id1:number";
var val=document.getElementById(number).value;

var sum = val;

for(var i=0;i<index;i++) {
var input1="view:_id1:repeat1:"+i+":inputText1"
var nr1=document.getElementById(input1).value;

sum-=nr1;
document.getElementById("view:_id1:repeat1:"+i+":inputText2").value = sum;
}

document.getElementById("view:_id1:test").value = (sum*100)/val; 

}
catch(e)
{
alert("no");
}]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:inputText>
                        <xp:inputText id="inputText2">
                            <xp:this.converter>
                                <xp:convertNumber type="number"></xp:convertNumber>
                            </xp:this.converter>
                        </xp:inputText>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:repeat>



        <xp:br></xp:br>


        <xp:br></xp:br>

        <xp:table style="width:100%">

            <xp:tr>
                <xp:td colspan="2" style="text-align:center">
                    <xp:button value="ADD FIELD" id="button1">
                        <xp:eventHandler event="onclick" submit="true"
                            refreshMode="complete">
                            <xp:this.action><![CDATA[#{javascript:sessionScope.dynaField=parseInt(sessionScope.dynaField)+1
getComponent("repeat1").setValue(parseInt(sessionScope.dynaField));
getComponent("inputText3").setValue(parseInt(sessionScope.dynaField));}]]></xp:this.action>
                        </xp:eventHandler>
                    </xp:button>
                    <xp:button value="REMOVE FIELD" id="button2">
                        <xp:eventHandler event="onclick" submit="true"
                            refreshMode="partial" refreshId="Panel_All">
                            <xp:this.action><![CDATA[#{javascript:sessionScope.dynaField=parseInt(sessionScope.dynaField)-1
getComponent("repeat1").setValue(parseInt(sessionScope.dynaField));
getComponent("inputText2").setValue(parseInt(sessionScope.dynaField));}]]></xp:this.action>

                        </xp:eventHandler>
                    </xp:button>
                </xp:td>

            </xp:tr>
        </xp:table>
        <xp:br></xp:br>
        <xp:button value="Diferenta" id="button4" style="width:200.0px">
            <xp:eventHandler event="onclick" submit="false">

                <xp:this.action>
                    <xp:executeScript>
                        <xp:this.script><![CDATA[#{javascript:getComponent("inputText3").setValue(getComponent("repeat1").getValue());}]]></xp:this.script>
                    </xp:executeScript>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>
    </xp:panel>

    <xp:button value="Save" id="button3">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete" immediate="false" save="true">
            <xp:this.action>
                <xp:openPage name="/xViewRepeat.xsp"></xp:openPage>
            </xp:this.action>
        </xp:eventHandler>
    </xp:button>
</xp:view>

3 个答案:

答案 0 :(得分：2)

您可以将重复字段保存到文档中并以这种方式从文档中恢复：

  • 收集输入字段中的所有值，并将其与字符“＃”连接到一个字符串
  • on submit将此字符串写入文档字段，例如“RepeatFields”
  • on beforePageLoad读取文档字段“RepeatFields”，将其拆分为数组并将其放入viewScope变量中，例如“viewScope.fields”
  • 将此viewScope变量指定给您的重复
  • 使用viewScope.fields [index]
    • 将重复输入字段与viewScope变量数组元素相连接
  • 在面板
    • 中单击ADD / REMOVE按钮后重新调整viewScope变量数组的大小

这是一个有效的XPage示例：

<?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="repeat">
        </xp:dominoDocument>
    </xp:this.data>
    <xp:this.beforePageLoad><![CDATA[#{javascript:
        var fields = [""];
        var repeatFields = document1.getItemValueString("RepeatFields");
        if (repeatFields) {
            fields = repeatFields.split("#");
        }
        viewScope.fields = fields;
        viewScope.dynaField = fields.length;
        }]]></xp:this.beforePageLoad>
    <xp:panel
        id="panelRepeat">
        <xp:this.rendered><![CDATA[#{javascript:    
            if (viewScope.fields.length < viewScope.dynaField) {
                viewScope.fields.push("");
            } else if (viewScope.fields.length > viewScope.dynaField) {
                viewScope.fields.remove(viewScope.fields.length - 1);
            }
            return true;}]]></xp:this.rendered>
        <xp:repeat
            id="repeat1"
            indexVar="index"
            value="#{viewScope.fields}"
            rows="100">
            <xp:inputText
                id="inputText1"
                value="#{viewScope.fields[index]}" />
            <xp:br />
        </xp:repeat>
    </xp:panel>
    <xp:br />
    <xp:button
        value="ADD FIELD"
        id="button1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panelRepeat">
            <xp:this.action><![CDATA[#{javascript:viewScope.dynaField += 1;
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:button
        value="REMOVE FIELD"
        id="button2">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panelRepeat">
            <xp:this.action><![CDATA[#{javascript:viewScope.dynaField -= 1;
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:br />
    <xp:button
        value="Save"
        id="button3">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete"
            immediate="false"
            save="true">
            <xp:this.action><![CDATA[#{javascript:
             document1.replaceItemValue("RepeatFields", viewScope.fields.join('#'));
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
</xp:view>

作为替代方案，您可以将每个输入字段保存到其自己的文档字段中。您将有一个文档字段“NumberRepeatFields”，其中包含输入字段和文档字段的数量“RepeatField0”，“RepeatField1”，“RepeatField2”，...包含值。

<?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="repeat">
        </xp:dominoDocument>
    </xp:this.data>
    <xp:panel
        id="panelRepeat">
        <xp:inputText
            id="inputNumberFields"
            value="#{document1.NumberRepeatFields}"
            defaultValue="1"
            style="display: none;">
            <xp:this.converter>
                <xp:convertNumber
                    type="number"
                    integerOnly="true">
                </xp:convertNumber>
            </xp:this.converter>
        </xp:inputText>
        <xp:repeat
            id="repeat1"
            rows="1000"
            indexVar="index">
            <xp:this.value><![CDATA[#{javascript:
            var numberRepeatFields = document1.getItemValueInteger("NumberRepeatFields");
            return new Array(numberRepeatFields > 0 ? numberRepeatFields : 1);
            }]]></xp:this.value>
            <xp:repeat
                id="repeat2"
                var="fieldName"
                value="#{javascript:['RepeatField' + index]}">
                <xp:inputText
                    id="inputText1"
                    value="#{document1[fieldName]}">
                </xp:inputText>
                <xp:br />
            </xp:repeat>
        </xp:repeat>
    </xp:panel>
    <xp:br />
    <xp:button
        value="ADD FIELD"
        id="button1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panelRepeat">
            <xp:this.action><![CDATA[#{javascript:
            var numberRepeatFields = document1.getItemValueInteger("NumberRepeatFields");
            document1.replaceItemValue("NumberRepeatFields", numberRepeatFields + 1);
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:button
        value="REMOVE FIELD"
        id="button2">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panelRepeat">
            <xp:this.action><![CDATA[#{javascript:
            var numberRepeatFields = document1.getItemValueInteger("NumberRepeatFields");
            if (numberRepeatFields > 1) {
                document1.replaceItemValue("NumberRepeatFields", numberRepeatFields - 1);
            }}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:br />
    <xp:button
        value="Save"
        id="button3">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete"
            immediate="false"
            save="true">
        </xp:eventHandler>
    </xp:button>
</xp:view>

答案 1 :(得分：1)

您不必创建基础表单。您可以从XPage中创建所需的字段，并从XPages中引用它们。

当您准备好研究Java时，您可以使用MIME bean来存储多个字段的Java结构。 Tim Tripcony为NotesIn9创建了一个关于这个主题的精彩视频：http://www.notesin9.com/2014/01/16/notesin9-135-using-java-in-xpages-part4/

答案 2 :(得分：1)

是否有特定原因将数据存储在您在主文档上命名的字段中？我的方法通常是为重复中的每一行创建一个文档。这将扩展用户是否想要创建1,100,1000而不进行设计更改。

相关问题
最新问题