Primefaces问题 - 需要在ajax更新后保持行扩展,但它会不断折叠

时间:2018-01-19 11:58:56

标签: ajax primefaces jsf-2 datatable rowexpansion

我遇到了JSF的问题。我尝试在更新后保持行扩展打开,但它会不断崩溃。

我想更改展开行中的面板内容并按下回复按钮,同时保持dataTable展开的行。

如果我能解决这个问题,那就太好了。我还使用partiallySubmit属性仅使用ajax更新某些组件,而不是全部。

我在这里提供代码:

    <p:dataTable id="topicDataTable" value="#{index.topics}" var="topic"
        rowIndexVar="row" rowKey="#{topic.id}" style="border:none;"
        onExpandStart="getExpandedRow()">
        <!--    expandedRow="#{true}" -->
        <p:column style="border-style:none;">
            <p style="padding-left: 50px; font-size: 8px;">
                <br />
            </p>
            <p style="font-size: 18px;">#{topic.title}</p>
            <p style="font-size: 8px;">#{topic.displayedCreatedOn}</p>
        </p:column>

        <p:column style="width:2%; border-style:none;">
            <p:rowToggler />
        </p:column>

        <p:rowExpansion style="border:none;">

            <p style="font-size: 16px;">
                <br />
            </p>

            <div style="padding-left: 30px;">
                <h:form id="replyForm" style="width:100%">
                    <p:panel id="repeatPanel">
                        <p:scrollPanel id="scrollPanel"
                            style="padding-left:50px;max-height:300px; overflow-y: auto;"
                            mode="native">


                            <p:repeat id="repeatComponent" value="#{topic.messages}"
                                var="reply">

                                <!-- rowIndexVar="row" -->
                                <div style="padding-left: 30px; font-size: 14px;">
                                    <p style="font-size: 14px; color: black;">#{reply.createdBy}</p>
                                    <p style="font-size: 8px; line-height: 12px">

                                        #{reply.displayedCreatedOn}</p>

                                    <p style="font-size: 4px;">
                                        <br />
                                    </p>
                                    <p
                                        style="color: rgba(0, 0, 0, .5); white-space: pre-wrap; font-size: 14px;">#{reply.text}</p>
                                </div>

                                <p style="padding-left: 50px; font-size: 16px;">
                                    <br />
                                </p>

                            </p:repeat>


                        </p:scrollPanel>



                        <!--    <h:form id="replyForm" style="width:100%"> -->
                        <p>
                            <p:inputTextarea id="replyArea" binding="#{replyInput}"
                                required="true" requiredMessage="The reply should not be empty"
                                style="vertical-align: middle; width:99.3%; " />
                        </p>
                        <p>
                            <p:message for="replyArea" style="color:red; font-size: 14px; " />
                        </p>
                        <p style="font-size: 8px;">
                            <br />
                        </p>
                        <p>
                            <p:commandButton value="Reply"
                                style="font-size: 12px; float:right; vertical-align:right;"
                                partialSubmit="true" actionListener="#{index.updateMessages}"
                                process="@form" update="replyForm:repeatPanel"
                                onstart="saveScrollPos()" oncomplete="getScrollPos()">
                                <!--     process="@form topicaDataTable:#{row}:repeatPanel"" -->
                                <f:attribute name="rowId" value="#{row}" />

                            </p:commandButton>

                        </p>
                        <p style="padding-left: 50px; font-size: 8px;">
                            <br />
                        </p>
                        <!--    </h:form> -->

                    </p:panel>
                </h:form>

            </div>

            <p style="padding-left: 50px; font-size: 16px;">
                <br />
            </p>

        </p:rowExpansion>
    </p:dataTable>

0 个答案:

没有答案