JSF PrimeFaces DataTable布局

Question

請使用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>  

Answer 1

感謝@Jitesh，解決方案是將CSS中的whitespace:nowrap用於列，此處更多信息： 如何在數據表的一列中顯示2行？