在JSF 1.1中實現子表格

Question

我們正在尋找一種在JSF 1.1中實現子表格的方法。由於目標服務器是WebSphere 6.1，因此我們無法使用Rich Faces。我試過JSTL和Tomahawk無濟於事。另外，我們的項目使用JSP而不是facelets。

Answer 1

您可以nesth:dataTable s彼此在h:column之內。但是您實際上想要在新的行中嵌套另一個h:dataTable。那麼沒有其他辦法可以創建一個列，並在其中放置一個h:panelGrid來表示「主」行和一個嵌套的h:dataTable來表示「詳細信息」行。您還需要CSS的良好鏡頭才能使其完美對齊，並且需要一些JavaScript的精巧部分來顯示/隱藏「詳細信息」行。

這裏有一個基本的開球例如：

<h:dataTable value="#{bean.orders}" var="order"> 
    <h:column> 
     <h:panelGrid columns="3"> 
      <h:graphicImage id="expand" value="expand.gif" onclick="toggleDetails(this);" /> 
      <h:outputText value="#{order.id}" /> 
      <h:outputText value="#{order.name}" /> 
     </h:panelGrid> 
     <h:dataTable id="details" value="#{order.details}" var="detail" style="display: none;"> 
      <h:column><h:outputText value="#{detail.date}" /></h:column> 
      <h:column><h:outputText value="#{detail.description}" /></h:column> 
      <h:column><h:outputText value="#{detail.quantity}" /></h:column> 
     </h:dataTable> 
    </h:column> 
</h:dataTable> 

的toggleDetails()功能可以像（注意，只有JSF生成的客戶端ID考慮在內），

function toggleDetails(image) { 
    var detailsId = image.id.substring(0, image.id.lastIndexOf(':')) + ':details'; 
    var details = document.getElementById(detailsId); 
    if (details.style.display == 'none') { 
     details.style.display = 'block'; 
     image.src = 'collapse.gif'; 
    } else { 
     details.style.display = 'none'; 
     image.src = 'expand.gif'; 
    } 
}