javascript - JSF 子表展开/折叠

Question

我正在运行 Rich Faces 3.x，我在数据表中有一个子表，我想最好使用 Java 脚本来切换显示/隐藏。到目前为止我所拥有的...

<c:set var="plusIcon" value="/sprites/images/collapsed.gif"/>
<c:set var="minusIcon" value="/sprites/images/expanded.gif"/>
...
<rich:dataTable id="bookList_dt" [...]>
<rich:column>
    <h:graphicImage id="expand" value="/images/expanded.gif" onclick="toggleDetails(this);"/>
</rich:column>
 <rich:column>
  <f:facet name="header">ID</f:facet>
  <h:outputText value="#{_item.bookId}"/>
 </rich:column>
[...]
 <rich:subTable value="#{_item.relatedVersions}  var="_relatedItem" id="relatedVersionsList">
  <rich:column>
   <f:facet name="header">ID</f:facet>
   <h:outputText value="#{_relatedItem.bookId}"/>
  </rich:column>
[...]
 </rich:subTable>
</rich:dataTable>

到目前为止我的 JavaScript...

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

目前我收到一个错误，指出 details 为空

编辑:我听说使用子表的 HtmlSubTable 类可能有效，但我没有看到它的任何使用示例，有人有任何想法吗？

Answer 1

下面提出的解决方案相当简单:找到所有连续的 tr元素并切换任何元素的可见性，直到类为 rich-table-row 的元素为止达到:

<h:graphicImage ... onclick="jQuery(this).closest('tr').nextAll('tr').each(function() {
           if(jQuery(this).is('.rich-table-row')) {return false;}
           jQuery(this).toggle();})"/>

该解决方案使用 RichFaces 3.3.3.Final 及其内置的 jQuery 库版本 1.3 进行了测试，该版本不包含更简单的 nextUntil(selector) jQuery 1.4 中引入的函数。

也就是说，如果您可以转移到 Richfaces 4.x，则可以使用 <rich:collapsibleSubTable> 为您的问题提供一些标准解决方案。和 <rich:collapsibleSubTableToggler> 组件(showcase example)。此外，值得注意的是，在 Richfaces 4.x 中，没有 <rich:subTable> 这样的组件。不再。