我对 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>