GWT:如何在单元格列表中实现手风琴效果

Question

我有一个RPC生成的带有标题和正文的小部件列表。我想垂直显示它们，只显示标题。当用户单击标题时，相应的正文将向下滑动到视图中，任何其他打开的正文将滑出视图。

手风琴效果可以通过StackPanel实现。但是，我也希望能够轻松地分页和访问 CellList 和 AsyncDataProvider 提供的远程数据。看起来两者将在GWT 2.5中一起提供，不幸的是，它还没有出来。

我的另一个想法是只使用CellList，并在每个单元格上使用相对定位来获得手风琴效果。逻辑很容易实现，但是从单元格列表中抓取单元格并弄乱它们的style属性似乎是一个肮脏的黑客。

有没有更好的方法可以做到这一点？

跟进：(我不确定这是否应该是一个单独的问题。CellList 的结构如下所示：

<div __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true" class="GJOQRHCBPB GJOQRHCBMK">  
<div onclick="" __idx="0" class="GJOQRHCBLB" style="outline:none;" tabindex="0">
  <!-- my cell html -->
</div>
<div onclick="" __idx="1" class="GJOQRHCBLB" style="outline:none;" tabindex="1"> <!-- ... -->
<div onclick="" __idx="2" class="GJOQRHCBLB" style="outline:none;" tabindex="2"> <!-- ... -->
<!-- ... -->
</div></div>

设置我的单元格样式非常简单，并且可以在页面上正确显示。但是，我对单元格的样式不会影响父div(带有 __idx(，并且它们仍然拉伸整个原始长度。这意味着，如果您单击单元格列表"应该"的位置下方，将触发选择事件。如果我可以直接访问和设置__idxdiv 的样式，则可以解决此问题，但恐怕这是一个非常肮脏的黑客。有没有更好的方法可以做到这一点？

Answer 1

GWT 2.5 将添加的是一种为CellTable(或DataGrid(中的 单个项目构建多行的方法;它不会在 CellList 秒内改变任何东西。此外，您仍将负责处理事件以展开/折叠行，可能对其进行动画处理，并且最多一个展开行也不会免费提供。

总而言之，它不会为您的用例改变任何东西。

您需要在单元格的渲染/事件处理中烘焙此展开/折叠行为。至于折叠其他行，你必须从列表级别开始处理 DOM(即找到所有可折叠的元素并确保它们被折叠，然后展开需要它的行(。
或者，您可以使用NoSelectionModel或SingleSelectionModel，只需将选定/上次选择的项目呈现为展开，而其他项则折叠(如果需要，触发从SelectionHandler重绘(。不过，您可能会丢失动画。