在Primefaces中将字段分组在一起

Question

我需要更改屏幕显示。 我需要在屏幕右上方将“日期”搜索字段分组在一起。还将非日期字段移动到屏幕的左侧。

到目前为止，我已经尝试过 面板网格，Div标签，panelGrid内的面板网格

这是我当前拥有的代码

<p:panelGrid columns="4" >  
 <p:outputLabel value="Field one "/> 
 <p:inputText id "/>
 <p:outputLabel value= Field two"/> 
  <p:inputText id= "/>

 </p:panelGrid>
 <p:panelGrid style="margin-bottom:10px;width:100%" cellpadding="5" align="center" >  

 <p:commandButton value="Search"   update="searchTable" />
 <p:commandButton value="Clear Search" 

 </p:panelGrid>

哪个显示如下，

field 1                 Field 2  
field 3                 Field 4
field 5                 Field 6  
field 7                 Field 8
field 9                 Field 10     
field 11                Field 12
field 13                Field 14 
Date field 15               date Field 16   
date  field 17               date Field 18 
date  field 19          date    Field 20

Search Clear Buttons

以上均为搜索字段。
  在搜索时，结果将显示在数据表中。

这是我需要的最终显示结果。

field 1                 Field 2                 Date Examined   From Field 15       to Field 16
field 3                 Field 4                 Date Evaluated  From Field 17       to Field 18
field 5                 Field 6                 Result date     From Field 19       to Field  20
field 7                 Field 8
field 9                 Field 10
field 11                Field 12
field 13                Field 14

搜索清除按钮