最近的项目需要用到一个比较冷门的技术，JSF。然后用到关于JSF的一个比较冷门的前端框架Primefaces。虽然小众，但是本着知识就是知识的原则，记录下来说不定以后，或者其他人也会用到。

Primefaces的Datatable标签的不规则表头

变态的客户需求，要求实现如下的表格

每条数据都是复数行，而且各个项目的宽度都不一致，不对齐

代码

 <p:dataTable var="car1" value="#{hello.cars}" style="width:700px">
 <p:columnGroup type="header">
 <p:row>
 <p:column headerText="Id" colspan="5" style="width:100px">
 </p:column>
 <p:column headerText="Year" colspan="5" style="width:100px">
 </p:column> 
 </p:row>
 <p:row>
 <p:column headerText="Price" style="width:100px">
 </p:column>
 <p:column headerText="Brand" style="width:100px">
 </p:column>
 <p:column headerText="Color" colspan="4" style="width:100px">
 </p:column>
 <p:column headerText="Date" colspan="4" style="width:100px">
 </p:column> 
 </p:row>
 </p:columnGroup>
 <p:column colspan="10" style="padding:0px;">
 <p:panelGrid style="border:0px;" cellpadding="0" cellspacing="0">
 <p:row >
 <p:column colspan="5" ><h:outputText value="#{car1.id}"/></p:column>
 <p:column colspan="5" ><h:outputText value="#{car1.year}"/></p:column>
 </p:row>
 <p:row> 
 <p:column style="width:100px">
 <h:outputText value="#{car1.price}" />
 </p:column>
 <p:column style="width:100px">
 <h:outputText value="#{car1.brand}" />
 </p:column>
 <p:column colspan="4" style="width:100px">
 <h:outputText value="#{car1.color}" />
 </p:column>
 <p:column colspan="4" style="width:100px">
 <h:outputText value="20190705" />
 </p:column> 
 </p:row>
 </p:panelGrid>
 </p:column> 
 </p:dataTable>

需要注意的有以下两点：

• 实现不对齐的多行表头，需要用到<p:columnGroup type="header">标签，更重要的是其中的colspan属性。
• 表格内容用到了<p:panelGrid><p:row><p:column>标签的组合，注意其顺序

Primefaces的Datatable标签的表头中添加按钮或者复选框

同样是变态客户的需求

代码：

<p:dataTable var="item1" value="#{anyBean.items}"
 rowKey="#{item1.no}"
 selection="#{anyBean.selectItem}"
 scrollable="true" scrollHeight="180" scrollWidth="100%"
 paginator="true"
 rows="5"
 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
 currentPageReportTemplate="Total : {totalRecords} records ({currentPage}of{totalPages})"
 rowsPerPageTemplate="5,10,15"
 paginatorPosition="bottom"
 >
 <p:columnGroup type="header">
 <p:row>
 <p:column width="20" rowspan="2"/>
 <p:column width="50" headerText="YearMonth">
 <f:facet name="header">
 <h:outputText value="YearMonth"/>
 <h:commandButton styleClass="ncu-cbtn-hidden" value="Button"/>
 </f:facet>
 </p:column>
 <p:column width="150" headerText="No." sortBy="#{item1.no}">
 <f:facet name="header">
 <h:outputText value="No."/> 
 <p:selectBooleanCheckbox value="true" />
 </f:facet>
 </p:column>
 <p:column width="100" headerText="Amount1"/>
 <p:column width="100" headerText="Amount2"/>
 <p:column width="100" headerText="Amount3"/>
 <p:column width="100" headerText="Amount4"/>
 </p:row>
 <p:row>
 <p:column width="100" headerText=""/>
 <p:column width="100" headerText="Condition"/>
 <p:column width="100" headerText="Date1" sortBy="#{item1.hawbHakoDate}"/>
 <p:column width="100" headerText="Date2" sortBy="#{item1.kumiireYearMonth}"/>
 <p:column width="100" headerText="No.2"/>
 <p:column width="100" headerText="Delete" />
 </p:row>
 </p:columnGroup>
<!-- 下略 -->

需要注意一下几点：

• 在表头中添加其他控件的是<f:facet>标签。
• 添加复选框的表头如果实现了排序功能，一定要注意复选框的选中和取消触发排序。
• <f:facet>中换行不能使用<br>，暂时不知道如何手动换行。