2

我正在运行 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}';
    }

目前我收到一个错误，指出详细信息为空

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

4

1 回答 1

0

下面提出的解决方案相当简单：找到所有连续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>组件（展示示例）来解决您的问题的一些标准解决方案。此外，值得注意的是，在 Richfaces 4.x 中<rich:subTable>不再存在这样的组件。

于 2013-10-09T11:22:56.353 回答