Question

我正在运行Rich Faces 3.x，我在dataTable中有一个subTable，我希望最好使用Java脚本来切换show / hide。我到目前为止......

<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类可能有用，但是我没有看到任何使用它的例子，有没有人有任何想法？

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版测试了该解决方案，该版本不包含jQuery 1.4中引入的更简单的nextUntil(selector)函数。

也就是说，如果您可以转到Richfaces 4.x，那么使用<rich:collapsibleSubTable>和<rich:collapsibleSubTableToggler>组件（showcase example）可以解决您的问题。此外，值得注意的是，在Richfaces 4.x中，不再有<rich:subTable>这样的组件。

JSF subTable展开/折叠

1 个答案: