题
我有三个下拉列表 <h:selectOneMenu>
, ,a <p:dataTable>
. 。我希望三个下拉列表与DataTable并排。正如我现在所拥有的那样,三个下拉列表列表在数据表上方。我尝试创建更大的表,并将三个下拉列表放入一列中,然后放 <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>
解决方案
两种方法:
创建一个
h:panelGrid
并将下拉列表放入一个h:panelGroup
. 。这h:panelGrid
呈现HTML<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>
将下拉序列包裹在
<h:panelGroup layout="block">
, ,它将渲染HTML<div>
元素。然后应用CSSfloat: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; }
不隶属于 StackOverflow