Implementing subtables in JSF 1.1

We're looking for a way to implement subtables in JSF 1.1. We cannot use Rich Faces due to 开发者_运维百科the fact that out target server is WebSphere 6.1. I've tried JSTL and Tomahawk to no avail. Also, our project is using JSP's and not facelets.

You can nest h:dataTables in each other inside a h:column. But you actually want to nest another h:dataTable inside a new row subsequently. There's then no other way to create a single column and put a h:panelGrid in it to represent the "main" row and a nested h:dataTable to represent the "detail" row. You also need a good shot of CSS to get it all nicely aligned and some smart piece of JavaScript to show/hide the "detail" row.

Here's a basic kickoff example:

<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>

The toggleDetails() function can look like (note that it takes JSF generated client ID into account):

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';
    }
}