重新渲染单个数据表行

时间:2012-06-01 07:11:15

标签: ajax jsf-2

我有一个基于dataTable的动态表单,嵌套在另一个dataTable内。

从嵌套dataTable中选择一行我想使用dataTable更新来自父<p:ajax>的相应行

<h:form id="form">

    <h:dataTable var="field" value="#{testBean.propertyList}" varStatus="status">

        <h:column>
            <h:outputLabel value="#{field.label}"/>
        </h:column>

        <h:column>
            <h:panelGrid columns="2" styleClass="app-grid" rendered="#{field.toOne}">
                <h:panelGroup id="value">
                    <h:outputText value="#{testBean.entity[field.name]}"/>
                </h:panelGroup>

                <h:panelGroup>
                    <p:commandButton id="button" type="button" icon="ui-icon ui-icon-search"/>
                    <p:overlayPanel for="button" my="left bottom" at="left bottom" widgetVar="panel_#{field.name}">
                        <p:dataTable
                            id="table" 
                            value="#{field.selectableModel}" 
                            selection="#{testBean.entity[field.name]}" 
                            selectionMode="single" 
                            var="item" 
                            rows="10"
                            paginator="true" 
                            paginatorAlwaysVisible="true"
                            paginatorPosition="bottom"
                            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            currentPageReportTemplate="{totalRecords} records found"
                            rowsPerPageTemplate="5,10,15">

                            <p:ajax event="rowSelect" update=":???:value" oncomplete="panel_#{field.name}.hide()"/>
                            <p:column headerText="entity">#{item}</p:column>
                        </p:dataTable>
                    </p:overlayPanel>
                </h:panelGroup>
            </h:panelGrid>
        </h:column>

    </h:dataTable>

</h:form>

问题是生成的组件树没有dataTable的重复显式子组件:

<HtmlForm enctype="application/x-www-form-urlencoded" id="form" inView="true" prependId="true" rendered="true" submitted="false" transient="false">
    <HtmlDataTable border="-2147483648" first="0" id="j_idt101" inView="true" rendered="true" rowIndex="-1" rowStatePreserved="false" rows="0" transient="false" var="field">
        <UIColumn id="j_idt103" inView="true" rendered="true" transient="false">
            <HtmlOutputLabel escape="true" id="j_idt120" inView="true" rendered="true" style="" transient="false"/>
        </UIColumn>
        <UIColumn id="j_idt121" inView="true" rendered="true" transient="false">
            <HtmlPanelGrid border="-2147483648" columns="2" id="j_idt122" inView="true" rendered="false" styleClass="app-grid" transient="false">
                <HtmlPanelGroup id="value" inView="true" rendered="true" transient="false">
                    <HtmlOutputText escape="true" id="j_idt227" inView="true" rendered="true" transient="false"/>
                </HtmlPanelGroup>
                <HtmlPanelGroup id="j_idt117" inView="true" rendered="true" transient="false">
                    <CommandButton ajax="true" async="false" disabled="false" escape="true" global="true" icon="ui-icon ui-icon-search" iconPos="left" id="button" immediate="false" inView="true" inline="false" partialSubmit="true" readonly="false" rendered="true" transient="false" type="button"/>
                    <OverlayPanel appendToBody="false" at="left bottom" dynamic="false" for="button" id="j_idt228" inView="true" my="left bottom" rendered="true" transient="false" widgetVar="panel_">
                        <DataTable currentPageReportTemplate="{totalRecords} records found" draggableColumns="false" editable="false" emptyMessage="No records found." filterEvent="keyup" first="0" id="table" inView="true" lazy="false" liveScroll="false" pageLinks="10" paginator="true" paginatorAlwaysVisible="true" paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rendered="true" resizableColumns="false" rowIndex="-1" rowStatePreserved="false" rows="10" rowsPerPageTemplate="5,10,15" scrollHeight="-2147483648" scrollRows="0" scrollWidth="-2147483648" scrollable="false" selectionMode="single" sortOrder="ascending" transient="false" var="item">
                            <Column colspan="1" disabledSelection="false" filterBy="false" filterMatchMode="startsWith" filterMaxLength="2147483647" filterPosition="bottom" headerText="entity" id="j_idt229" inView="true" rendered="true" resizable="true" rowspan="1" transient="false" width="-1">
                                #{item}
                            </Column>
                        </DataTable>
                    </OverlayPanel>
                </HtmlPanelGroup>
            </HtmlPanelGrid>
        </UIColumn>
    </HtmlDataTable>
</HtmlForm>

因此我考虑使用<c:forEach>而不是父dataTable来使组件树中的每一行都显式化。

但第一个问题是testBean@ViewScoped ...

,第二个是使用<c:forEach>导致Java Heap Space错误...

一些提示?

1 个答案:

答案 0 :(得分:1)

为外表提供固定的id

<h:dataTable id="table" ...>

然后你就可以使用

<p:ajax ... update=":form:table:value" />