2015-06-29 173 views
2

我是新來的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

回答

0

這在數據表中根本不可能。

1

您可以在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

0
<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,但我想可以很容易地採用舊版本。 –