[英]JSF PrimeFaces DataTable layout
请使用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>
感谢@Jitesh,解决方案是将CSS中的whitespace:nowrap
用于列,此处更多信息: 如何在数据表的一列中显示2行?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.