1

3つのドロップダウンリスト<h:selectOneMenu>と1つがあり<p:dataTable>ます。3つのドロップダウンリストをdataTableと並べて表示したいと思います。私が今持っているように、3つのドロップダウンリストはdataTableの上にあります。より大きなテーブルを作成し、3つのドロップダウンリストを1つの列に配置<h:dataTable>し、別の列に配置して並べてレイアウトしようとしましたが、機能しません。これが私がこれまでに得たものです

        <h:selectOneMenu id="customer" value="#{DMBackingBean.customer}">
            <f:selectItem itemLabel="Select Customer" itemValue="" />
            <f:selectItems value="#{DMBackingBean.customers}"/>
            <p:ajax actionListener="#{DMBackingBean.handCustomerChange}" update="facility" event="change"/>
        </h:selectOneMenu>
        <br/><br/>
        <h:selectOneMenu id="facility" value="#{DMBackingBean.facility}">
            <f:selectItem itemLabel="Select Facility" itemValue=""/>
            <f:selectItems value="#{DMBackingBean.facilities}"/>
        </h:selectOneMenu>
        <br/><br/>
        <h:selectOneMenu id="project" value="#{DMBackingBean.project}">
            <f:selectItem itemLabel="Select Projet" itemValue=""/>
            <f:selectItems value="#{DMBackingBean.projects}"/>
        </h:selectOneMenu>
        <p:dataTable var="item" value="#{DMBackingBean.drawings}" selection="#{DMBackingBean.selectedDrawing}" selectionMode="single">
            <p:column>
                <f:facet name="header">
                    <h:outputText value="DrawingType"/>
                </f:facet>
                <h:outputText value="#{item.drawingType}"/>
            </p:column>
            ...
        </p:dataTable>
4

1 に答える 1

2

ふたつのやり方：

  1. を作成しh:panelGrid、ドロップダウンを1つに配置しh:panelGroupます。は、各子が独自の要素に含まれるHTML要素をレンダリングh:panelGridします。<table><td>

    <h:panelGrid columns="2">
     <h:panelGroup>
         <h:selectOneMenu>...</h:selectOneMenu>
         <h:selectOneMenu>...</h:selectOneMenu>
         <h:selectOneMenu>...</h:selectOneMenu>
     </h:panelGroup>
     <h:dataTable>...</h:dataTable>
</h:panelGrid>

  2. ドロップダウンをでラップすると、HTML要素<h:panelGroup layout="block">がレンダリングされます。次に、との両方に<div>CSSを適用します。float:left;<h:panelGroup><h:dataTable>

     <h:panelGroup layout="block" styleClass="left">
     <h:selectOneMenu>...</h:selectOneMenu>
     <h:selectOneMenu>...</h:selectOneMenu>
     <h:selectOneMenu>...</h:selectOneMenu>
 </h:panelGroup>
 <h:dataTable styleClass="left">...</h:dataTable>

    と

    .left { float: left; }
于 2010-06-29T21:04:20.180 に答える