JSF PrimeFaces 3.5 と Accordion Panel のレイアウトの問題を解決するのを手伝ってください。
以下は、AccordionPanel を使用していないスクリーンショットです: DataTable、いくつかの特別な入力。
AccordionPanel を使用して、そこに DataTable を配置します。現在、DataTable のレイアウトが破損しています。
AccordionPanel ケースのソース コードは次のとおりです。
<p:accordionPanel activeIndex="-1" id="dsAccordionPanelMain" multiple="true" dynamic="true">
<p:tab title="Data source" rendered="true">
<h:dataTable value="#{treeBean.selectedDataSourceProps}" var="dataPropertyCurrent" id="propsDataTable"
styleClass="custom-data-table"
headerClass="custom-data-table-header"
rowClasses="custom-data-table-odd-row,custom-data-table-even-row"
>
<h:column>
<f:facet name="header">Label</f:facet>
#{dataPropertyCurrent.label}
</h:column>
<h:column>
<f:facet name="header">Diapasone (min-max) or pattern</f:facet>
<p:panel rendered="#{dataPropertyCurrent.type == 'dateTime'}">
<p:calendar value="#{dataPropertyCurrent.diapasone.min}" disabled="#{dataPropertyCurrent.editableDiapasone}"
pattern="MM/dd/yyyy HH:mm"
mindate="#{dataPropertyCurrent.diapasone.min}" maxdate="#{dataPropertyCurrent.diapasone.max}"/>
-
<p:calendar value="#{dataPropertyCurrent.diapasone.max}" disabled="#{dataPropertyCurrent.editableDiapasone}"
pattern="MM/dd/yyyy HH:mm"
mindate="#{dataPropertyCurrent.diapasone.min}" maxdate="#{dataPropertyCurrent.diapasone.max}"/>
</p:panel>
<p:panel rendered="#{dataPropertyCurrent.type == 'string'}">
<h:inputText value="#{dataPropertyCurrent.diapasone.min}" disabled="#{dataPropertyCurrent.editableDiapasone}"/>
-
<h:inputText value="#{dataPropertyCurrent.diapasone.max}" disabled="#{dataPropertyCurrent.editableDiapasone}"/>
</p:panel>
<p:panel rendered="#{dataPropertyCurrent.type == 'decimal'||dataPropertyCurrent.type == 'gYear'}">
<h:panelGrid columns="1" style="margin-bottom:4px">
<h:outputText id="displayRange" value="Between #{dataPropertyCurrent.diapasone.min} and #{dataPropertyCurrent.diapasone.max}"/>
<p:slider for="txt6,txt7" display="displayRange" style="width:400px" range="true"
minValue="#{dataPropertyCurrent.diapasone.min}" maxValue="#{dataPropertyCurrent.diapasone.max}"
displayTemplate="Between {min} and {max}"/>
</h:panelGrid>
<h:inputHidden id="txt6" value="#{dataPropertyCurrent.diapasone.min}" />
<h:inputHidden id="txt7" value="#{dataPropertyCurrent.diapasone.max}" />
</p:panel>
<p:panel rendered="#{dataPropertyCurrent.type == 'double'}">
<p:spinner value="#{dataPropertyCurrent.diapasone.min}" stepFactor="#{(dataPropertyCurrent.diapasone.max- dataPropertyCurrent.diapasone.min)/100}"
min="#{dataPropertyCurrent.diapasone.min}" max="#{dataPropertyCurrent.diapasone.max}" disabled="#{dataPropertyCurrent.editableDiapasone}"
onkeypress="return false;"/>
-
<p:spinner value="#{dataPropertyCurrent.diapasone.max}" stepFactor="#{(dataPropertyCurrent.diapasone.max- dataPropertyCurrent.diapasone.min)/100}"
min="#{dataPropertyCurrent.diapasone.min}" max="#{dataPropertyCurrent.diapasone.max}" disabled="#{dataPropertyCurrent.editableDiapasone}"
onkeypress="return false;"/>
</p:panel>
</h:column>
<h:column>
<f:facet name="header">Join options</f:facet>
<p:commandButton id="joinBtn" value="Basic" type="button" disabled="#{dataPropertyCurrent.notJoinable}"/>
<p:overlayPanel id="joinPanel" for="joinBtn" >
<f:facet name="header">Details In Tree</f:facet>
<h:outputLabel value="Joinable" />
<h:outputLabel value="#{dataPropertyCurrent.joinableText}" />
</p:overlayPanel>
</h:column>
</h:dataTable>
<br/>
<br/>
</p:tab>
</p:accordionPanel>