在一种形式中使用多个FluidGrids

时间:2015-06-09 12:04:36

标签: jsf jsf-2 primefaces jsf-2.2 primefaces-extensions

我正在使用Primefaces 5.2,FluidGrid(PrimeFaces Extensions 3.1.0)创建动态表单

我的表单有几个子部分,因此我创建了一个private HashMap<PDIDefinition, List<FluidGridItem>> formItems;,其中PDIDefinition表示表单的一部分。

在我看来,我:

<ui:repeat var="pdi" value="#{FormGenerator.formItems.keySet().toArray()}" id="all">

        <p:panel header="#{pdi.getFragmentDefinition().getFragmentName()}" style="margin-bottom:1em; width:100%;">

            <pe:fluidGrid id="fluidGrid" value="#{FormGenerator.formItems.get(pdi)}" var="data"
                          hGutter="20" vGutter="10" widgetVar="fluidGridWdgt" 
                          >
                <pe:fluidGridItem type="stringValue" >
                    <div class="dynaFormLabel">
                        <p:outputLabel for="txt" value="#{data.label}"/>
                    </div>
                    <p:inputText id="txt" value="#{data.value}" />
                </pe:fluidGridItem>
                <pe:fluidGridItem type="integerValue">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="int" value="#{data.label}"/>
                    </div>
                    <p:spinner id="int" value="#{data.value}" />
                </pe:fluidGridItem>
                <pe:fluidGridItem type="dateValue" styleClass="calendar">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="cal" value="#{data.label}"/>
                    </div>
                    <p:calendar id="cal" value="#{data.value}" showOn="button"/>
                </pe:fluidGridItem>
            </pe:fluidGrid>
        </p:panel>
    </ui:repeat>

    <p:commandButton action="#{FormGenerator.saveValues}" process="form"/>

如您所见,我为每个部分添加了一个Panel,然后为每个部分添加一个fluidGrid。

然而,我的问题是,后端中的数据仅存储在最后一个fluidGrid中,而不是全部存储。我检查了chrome的网络日志,可以看到所有值都提交给服务器。

所以我的问题是:如何确保更新服务器上的所有数据。 或者:有没有办法可以在一个FluidGrid中对元素进行分组?

来自支持bean的更多信息(项目创建过程):

private void generateModel() {

    fragments = new ArrayList<>();
    fragmentValues = new ArrayList<>();
    formItems = new HashMap<>();
    fields = new ArrayList<>();

    for (PDIDefinition pdid : pdiDefinitions) {

        Fragment f = new Fragment();
        f.setDefinition(pdid.getFragmentDefinition());
        fragments.add(f);
        List<FluidGridItem> items = new ArrayList<>();
        formItems.put(pdid, items);

        for (FragmentValueDefinition fvd : f.getDefinition().getFragmentValues()) {

            FragmentValue fv = new FragmentValue();
            fv.setFragmentValueDefinition(fvd);
            fv.setFragmentId(f.getInner());
            if (f.getValues() == null) {
                f.setValues(new ArrayList<>());
            }
            f.getValues().add(fv);
            fragmentValues.add(fv);
            DynamicField df = new DynamicField((fv));
            fields.add(df);
            if ("String".equals(fvd.getType())) {
                items.add(new FluidGridItem(df, "stringValue"));
            }
            if ("Integer".equals(fvd.getType())) {
                items.add(new FluidGridItem(df, "integerValue"));
            }
            if ("Date".equals(fvd.getType())) {
                items.add(new FluidGridItem(df, "dateValue"));
            }
        }

    }

}

修改

更改了xhtml以反映新发现: <h:form> within <ui:repeat> not entirely working, only the last <h:form> is processed

但是,提交时服务器上的<p:dataList>的最后一次迭代的所有值都不会更新(提交时的值会在客户端上重置)。最后一次迭代的值存储在服务器上。

   <p:dataList var="pdi" value="#{FormGenerator.formItems.keySet()}" id="all" varStatus="loop" type="none" >
        <p:panel id="panel" header="#{pdi.getFragmentDefinition().getFragmentName()}" style="margin-bottom:1em; width:100%;">
            <pe:fluidGrid  id="fluidGrid" value="#{FormGenerator.formItems[pdi]}" var="data"
                           hGutter="20" vGutter="10" >

                <pe:fluidGridItem type="stringValue"  id="txt_">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="txt" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
                    </div>
                    <p:inputText id="txt" value="#{FormGenerator.formItems[pdi][data.id].getData().value}"/>
                </pe:fluidGridItem>
                <pe:fluidGridItem type="integerValue" id="int_">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="int" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
                    </div>
                    <p:spinner id="int" value="#{FormGenerator.formItems[pdi][data.id].getData().value}" />
                </pe:fluidGridItem>
                <pe:fluidGridItem type="dateValue" id="cal_">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="cal" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
                    </div>
                    <p:calendar id="cal" value="#{FormGenerator.formItems[pdi][data.id].getData().value}" showOn="button"/>
                </pe:fluidGridItem>

            </pe:fluidGrid>
        </p:panel>
    </p:dataList>

提交为chrome的部分POST请求显示:

form:form
form:all:0:fluidGrid:txt:n
form:all:0:fluidGrid:TV5Wd2IL:txt:
form:all:0:fluidGrid:CYqNHGWx:int_input:
form:all:0:fluidGrid:Y6QIaH1C:cal_input:
form:all:1:fluidGrid:hvi81zhh:txt:k
form:all:1:fluidGrid:iY1YsIDm:txt:
form:all:2:fluidGrid:BA6slTyQ:txt:p

我在输入字段中输入了“n”,“k”和“p”。只有“p”存储在服务器上。

0 个答案:

没有答案