JSF subTable Развернуть/свернуть

Question

Я запускаю Rich Faces 3.x, и у меня есть subTable в dataTable, который я бы хотел переключить show/hide, предпочтительно используя 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}'; 
    } 

В настоящее время я получаю ошибку, заявив, что детали является нулевым

EDIT: Я слышал, что использование класса подклассов 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>.