单元格中的数据表格合并

问题描述:

我是新来的primefaces。我的应用程序中有一个数据表。在那3列我需要合并一些行。该行数将根据数据动态生成。如果我试图在该特定列标记中使用rowspan,则会额外创建空白单元格,并且总数据表格格式会更改。如何在primefaces中合并数据行。作为参考,我附上设计和代码。单元格中的数据表格合并

XHTML代码:

<f:facet name="header"> 
     <h:outputText value="Date"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_date}" /> 

</p:column> 

<p:column style="font-size:12px;width:73px;" > 
    <f:facet name="header"> 
     <h:outputText value="Slot"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_slot}" /> 
</p:column> 

<p:column style="font-size:12px;width:73px;" > 
    <f:facet name="header"> 
     <h:outputText value="Number of Resources Required"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_noresources}" /> 
</p:column> 

<p:column headerText="Select" id="hSelect" style="font-size:12px;width:60px;"> 

    <p:selectBooleanCheckbox id="Booleanchkbox" onclick="{dtstep2_tab1.select='true'}" > 
     <p:ajax listener="#{dtstep2_tab1.UpdateStatus}" update="panel1" /> 

    </p:selectBooleanCheckbox> 
</p:column> 

<p:column style="font-size:12px;width:70px;"> 
    <f:facet name="header"> 
     <h:outputText value="Employee Name"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_empname}" /> 
</p:column> 

<p:column style="font-size:12px;width:120px;"> 
    <f:facet name="header"> 
     <h:outputText value="Contact Details"></h:outputText> 
    </f:facet> 
    <h:outputText value="#{step2table.rs2_contactdet}" /> 
</p:column> 

<p:column style="font-size:12px;width:70px;"> 
    <f:facet name="header"> 
     <h:outputText value="Worked Hrs to Date"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_totworkhours}" /> 
</p:column> 

<p:column style="font-size:12px;width:50px;"> 
    <f:facet name="header"> 
     <h:outputText value="Agency Recruited"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_recruitmode}" /> 
</p:column> 

<p:column style="font-size:12px;width:70px;"> 
    <f:facet name="header"> 
     <h:outputText value="Priority"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_priority}"/> 
</p:column> 

<p:column style="font-size:12px;width:90px;"> 
    <f:facet name="header"> 
     <h:outputText value="Type of Skill"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_skilltype}" /> 
</p:column> 

<p:column style="font-size:12px;width:120px;"> 
    <f:facet name="header"> 
     <h:outputText value="Restriction"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_restriction}" /> 
</p:column> 

<p:column style="font-size:12px;width:150px;"> 
    <f:facet name="header"> 
     <h:outputText value="Rest. Details"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_restdet}" /> 
</p:column> 

<p:column style="font-size:12px;width:70px;"> 
    <f:facet name="header"> 
     <h:outputText value="B2B Days"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_b2bdays}" /> 
</p:column> 

<p:column style="font-size:12px;width:70px;"> 
    <f:facet name="header"> 
     <h:outputText value="B2B Hrs"></h:outputText> 
    </f:facet> 
     <h:outputText value="#{step2table.rs2_b2bhrs}" /> 
</p:column> 

<p:column headerText="Status" id="hStatus" style="font-size:12px;width:100px;"> 
    <h:selectOneMenu id="cbo" value="#{step2table.rs2_status}" > 
     <f:selectItem itemLabel="Confirmed" itemValue="Confirmed"></f:selectItem> 
     <f:selectItem itemLabel="Selected" itemValue="Selected"></f:selectItem> 
     <f:selectItem itemLabel="Rejected" itemValue="Rejected"></f:selectItem> 

    </h:selectOneMenu> 
</p:column> 

<p:column style="font-size:12px;width:150px;"> 
    <f:facet name="header"> 
     <h:outputText value="Comments"></h:outputText> 
    </f:facet> 
     <h:inputText value="#{step2table.rs2_comments}" rendered="#{dtstep2_tab1.editable}"/> 
</p:column> 

需要合并前三列 “的日期,插槽和没有资源所需的” 基于员工列数据。在此指导我。提前致谢。

+1

为什么蕊数据表标签?你使用什么版本的PF? – Kukeltje

这在数据表中根本不可能。

您可以在p:dataTable中使用p:summaryRow tag例子:

<h:form> 
    <p:dataTable var="car" value="#{dtSummaryRowView.cars}" sortBy="#{car.brand}"> 
     <p:column headerText="Id" sortBy="#{car.id}"> 
      <h:outputText value="#{car.id}" /> 
     </p:column> 
     <p:column headerText="Year" sortBy="#{car.year}"> 
      <h:outputText value="#{car.year}" /> 
     </p:column> 
     <p:column headerText="Brand" sortBy="#{car.brand}"> 
      <h:outputText value="#{car.brand}" /> 
     </p:column> 
     <p:column headerText="Color" sortBy="#{car.color}"> 
      <h:outputText value="#{car.color}" /> 
     </p:column> 
     <p:summaryRow> 
      <p:column colspan="3" style="text-align:right"> 
       <h:outputText value="Total:" /> 
      </p:column> 
      <p:column> 
       <h:outputText value="#{dtSummaryRowView.randomPrice}"> 
        <f:convertNumber type="currency" currencySymbol="$" /> 
       </h:outputText> 
      </p:column> 
     </p:summaryRow> 
    </p:dataTable> 
</h:form> 

欲了解更多信息,请参阅primefaces展示链接:http://www.primefaces.org/showcase/ui/data/datatable/summaryRow.xhtml

<p:column width="440"> 
    <p:panelGrid rendered="#{someCondition}"> 
     <f:facet name="header"> 
      <p:row>        
       <p:column width="80"><h:outputText value="#{msg.isin}" /></p:column> 
       <p:column width="80"><h:outputText value="#{msg.wkn}" /></p:column> 
       <p:column width="200"><h:outputText value="#{msg.name}" /></p:column> 
       <p:column width="80"><h:outputText value="#{msg.amount}" /></p:column> 
      </p:row> 
     </f:facet> 
     <p:row>        
      <p:column><h:outputText value="#{savingsPlanPosition.isin}" /></p:column> 
      <p:column><h:outputText value="#{savingsPlanPosition.wkn}" /></p:column> 
      <p:column><h:outputText value="#{savingsPlanPosition.name}" /></p:column> 
      <p:column><h:outputText value="#{savingsPlanPosition.amount}" /></p:column> 
     </p:row> 
    </p:panelGrid> 
    <p:panelGrid rendered="#{!someCondition}"> 
     <h:link id="savingsPlanPositionDetails${rowIndex}" 
      title="#{msg.assign_etf}" 
      outcome="portfolioPositionDetail"> 
      <f:param name="portfolioId" 
       value="#{savingsPlanController.portfolioId}"></f:param> 
      <f:param name="portfolioPositionId" 
       value="#{savingsPlanPosition.portfolioPositionId}"></f:param> 
      <f:param name="from" 
       value="savingsPlan"></f:param> 
      <h:outputText value="#{msg.assign_etf}"/> 
     </h:link> 
    </p:panelGrid> 
</p:column> 
+0

这个工作适用于什么版本的PF?非常古老的使用yui-datatable(2.0及以下?),请加一点文字/解释,将不胜感激。 – Kukeltje

+0

primefaces 5.3,但我想可以很容易地采用旧版本。 –