展开/折叠数据表中的子表答案

【问题标题】：Expand/Collapse Subtable in Datatable展开/折叠数据表中的子表
【发布时间】：2010-09-14 10:02:23
【问题描述】：

是否可以展开/折叠数据表中的子表？我的子表包含与其上方行相关的信息，我想显示/隐藏图像的点击。只是想知道我该怎么做？

这是我目前正在使用的：

  <rich:dataTable value="#{accountsBean.musicboxes}"  var="currentMusicBox">               
                <rich:column>
                        <h:graphicImage id="expand" value="../AccountsForms/images/details_open.png" onclick="toggleNotes(this);" />
                        <rich:column><h:outputText value="#{currentMusicBox.name}" /></rich:column>
                        <rich:column><h:outputText value="#{currentMusicBox.username}" /></rich:column>
                        <rich:column><h:outputText value="#{currentMusicBox.password}" /></rich:column>
                        <rich:column><h:outputText value="#{currentMusicBox.location}" /></rich:column>
                            <rich:dataTable id="notesTable" value="#{currentMusicBox.notes}" var="currentNote" style="display: none;">
                                <rich:column><h:outputText value="#{currentNote.body}" /></rich:column>
                                <rich:column><h:outputText value="#{currentNote.dateAdded}" /></rich:column>
                                <rich:column><h:outputText value="#{currentNote.note_type}" /></rich:column>
                            </rich:dataTable>
                 </rich:column>
        </rich:dataTable>

问题是我的表中只有第一个条目显示正常。它在表格中，我可以切换图像的注释。其余条目只是一个接一个（没有格式的外表。单击图像将打开一个带有正确格式的相关注释的表

【问题讨论】：

标签： jsf richfaces

【解决方案1】：

当然。

使用

<rich:dataTable value="#{myBean.records}" var="myRecord">

<rich:subTable  rendered="#{myRecord.subValue != null}" 
 value="#{myRecord.subValue}" >
...
</rich:subTable>
</rich:dataTable>

在 bean 中的位置：

public List<Records> getRecords() {
        return records;
}

并且Records 类有子记录subValues。

【讨论】：

【解决方案2】：

您现在可以在 RichFaces 4 中使用 <rich:collapsibleSubTable> 组件执行此操作。

【讨论】：

【解决方案3】：

<rich:dataTable id="calltable" value="#{accountsBean.musicboxes}"
                var="currentMusicBox">
    <rich:column id="suitable" colspan="12" width="0" breakBefore="true"
                 style="border-color: #549FBE; border-style: solid; border-width: 1px;
                 display: #{!VwCallListServiceBean.show?'none':'show'};">
        <rich:dataTable value="#{currentMusicBox.notes}" var="currentNote"
                        border="0" rules="none"
                        style="border: none; margin: 0px; padding: 0px;">
            <rich:column width="800px" style="border: none; margin: 0px; padding: 0px;"
                         colspan="12">
                <span style="color: #3A84A7;">
                    â–º
                </span>
                <h:outputText value=" #{currentNote.body}"/>
            </rich:column>
        </rich:dataTable>
    </rich:column>
</rich:dataTable>

我已经根据您的要求使用了这个修改它....

【讨论】：

我试过这个，但它似乎只是在最后打开一个新列。即breakbefore 不会把它放在新行中。我也尝试过使用显示/隐藏 div 和 div 内的数据表，但这也不起作用。