Развернуть сворачивание строк таблицы в Datatable JSF
Вопрос
Я пытался реализовать эту функциональность расширения / свертывания строк таблицы, используя core JSF, а также я должен сохранить сортировку.Есть ли способ в core JSF, где я могу достичь этой функциональности?
Решение
Если вы настаиваете на использовании только ссылочной реализации, то вы не можете использовать вложенный h:dataTable
и/или h:panelGroup
и a хорошо снимок CSS, чтобы он был красиво выровнен.Затем вы можете использовать JavaScript как умный способ показать / скрыть детали строки.
Вот базовый пример начала игры:
<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>
В toggleDetails()
функция может выглядеть следующим образом (обратите внимание, что она учитывает идентификатор клиента, сгенерированный JSF):
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';
}
}
Другие советы
Я не думаю, что вы можете сделать это с помощью 'core' JSF (под которым, я полагаю, вы подразумеваете использование только эталонной реализации).
Насколько я понимаю, вы можете создавать подтаблицы с помощью RichFaces Подтаблица
Вы также можете проделать аналогичную вещь с ICEfaces - смотрите демонстрация компонентов (это находится в разделе Таблица -> Расширяемая таблица).Однако любой из них потребует от вас добавления и настройки другой библиотеки (RichFaces или ICEfaces), которая, вероятно, не то, что вам нужно.
Простая расширяемая таблица с богатыми интерфейсами
Мы можем создать простую расширяемую таблицу с помощью RichFaces и код приведен ниже...
<h:form>
<rich:dataTable value="#{wonderBean.wonders}" var="wonder">
<rich:column colspan="3">
<f:facet name="header">Wonder</f:facet>
<h:outputText value="#{wonder.name}" />
<a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
reRender="link">
<a4j:actionparam name="val" value="#{!wonderBean.show}"
assignTo="#{wonderBean.show}" />
</a4j:commandLink>
</rich:column>
<rich:columnGroup>
<rich:column>
<a4j:outputPanel ajaxRendered="true">
<rich:dataTable value="#{wonder.details}" var="detail"
rendered="#{wonderBean.show}" style="border: 0px">
<rich:column>
<f:facet name="header">Location</f:facet>
<h:outputText value="#{detail.location}" />
</rich:column>
<rich:column>
<f:facet name="header">Image</f:facet>
<h:graphicImage value="#{detail.imageUrl}" />
</rich:column>
</rich:dataTable>
</a4j:outputPanel>
</rich:column>
</rich:columnGroup>
</rich:dataTable>
</h:form>