展開數據表中的錶行的摺疊JSF

Question

我一直在嘗試使用核心JSF來實現錶行的展開/摺疊功能，並且還必須保留排序功能。在我可以實現這種功能的核心JSF中有沒有一種方法？

Answer 1

如果僅使用參考實現堅持，那麼你就不能使用嵌套h:dataTable和/或h:panelGroup和良好拍攝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'; 
    } 
} 

Answer 2

我不認爲你可以用'core'JSF（我假定你的意思是隻使用參考實現）來做到這一點。

據我瞭解，你可以完成與RichFaces的subTable

子表你也可以做類似的事情與ICEfaces的 - 看到component showcase（它的表下 - >擴展桌子）。然而，其中任何一個都需要你添加和設置另一個庫（RichFaces或IceFaces），這可能不是你想要的。

Answer 3

簡單擴展桌子與RichFaces的

我們可以用RichFaces 做簡單的可擴展表格，代碼如下：

<h:form> 
    <rich:dataTable value="#{wonderBean.wonders}" var="wonder"> 
     <rich:column colspan="3"> 
     <f:facet name="header">Wonder</f:facet> 
    <h:outputText value="#{wonder.name}" /> 
    <a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}" 
     reRender="link"> 
    <a4j:actionparam name="val" value="#{!wonderBean.show}" 
     assignTo="#{wonderBean.show}" /> 
    </a4j:commandLink> 
     </rich:column> 
     <rich:columnGroup> 
     <rich:column> 
     <a4j:outputPanel ajaxRendered="true"> 
      <rich:dataTable value="#{wonder.details}" var="detail" 
      rendered="#{wonderBean.show}" style="border: 0px"> 
       <rich:column> 
      <f:facet name="header">Location</f:facet> 
      <h:outputText value="#{detail.location}" /> 
      </rich:column> 
      <rich:column> 
       <f:facet name="header">Image</f:facet> 
       <h:graphicImage value="#{detail.imageUrl}" /> 
      </rich:column> 
     </rich:dataTable> 
      </a4j:outputPanel> 
     </rich:column> 
     </rich:columnGroup> 
    </rich:dataTable> 
</h:form>