0

我有一个包含各种 primefaces 组件的网页。我想以如下所示的格式在页面上显示数据：

表格格式，但根据复选框选择动态加载行

该表由 3 行组成：

第 1 行有 3 列。第 1 列有一组复选框。单击该列表中的复选框，通过对这些行内的面板进行 ajax 更新，有条件地加载第 2 行和第 3 行。

此实现最初是在richfaces 中完成的，并使用richfaces 列的rowBreakBefore 属性在行之间放置换行符。

将组件转换为 primefaces 后，我失去了使用 rowBreakBefore 操作列以落在新行上的能力。我将实现移至 panelgrid 并重复；panelgrid 处理布局并重复处理行。

但是我无法基于单击第 1 行第 1 列中的复选框有条件地显示行（使用第 2 行和第 3 行中面板组件的 ajax 更新）。

如果我在第 1 列中选择所需的复选框后保存页面，它会正确显示错误，因为第 2 行中的复选框列表是必填字段，并且第 2 行也会显示。

我想通过单击复选框向用户显示该行，并且不想进行整页刷新。

网格布局代码

<p:panelGrid id="decisionsTable">
    <p:row/>
    <f:facet name="header">
        <p:row>
            <p:column>
            </p:column>
            ...
        </p:row>
    </f:facet>
    <p:repeat var="" varStatus="" value="}">
        <p:row id="">
            <p:column id="" style="width: 40%">                                                                                                             
                <p:outputPanel id="">
                    <h:panelGroup rendered="">
                        <div class="dataLabelNarrow"></div>
                        <div class="data listBox required">
                            <h:selectManyCheckbox value="" layout="pageDirection"
                                                  converter="javax.faces.Long">
                                <f:selectItems value="" var="" itemLabel="" itemDescription=""
                                               itemValue=""/>
                                <p:ajax event="valueChange" process="@this"
                                               update="@form @([id$=sectionToUpdate]) 
                                                       @([id$=anotherSectionToUpdate])"/>
                            </h:selectManyCheckbox>
                        </div>
                    </h:panelGroup>                               
                </p:outputPanel>                            
            </p:column>
            <p:column id="" style="width: 40%">
                ...
            </p:column>
            <p:column id="" style="width: 20%">
                ...                           
            </p:column>
        </p:row>
        <p:row rendered="...">
            <p:column colspan="3">
                <p:outputPanel id="sectionToUpdate">
                    <h:panelGroup>
                          ...
                    </h:panelGroup>
                </p:outputPanel>
            </p:column>
        </p:row>
        <p:row rendered="...">
            <p:column colspan="3">
                <p:outputPanel id="anotherSectionToUpdate">
                    <h:panelGroup>
                          ...
                    </h:panelGroup>
                </p:outputPanel>
            </p:column>
        </p:row>
        <p:row id="">
            <p:column colspan="3">
                ...
            </p:column>
        </p:row>
    </p:repeat>
</p:panelGrid>
4

0 回答 0