GWT：如何在 Cell List 中实现手风琴效果？答案

【问题标题】：GWT: How to achieve an accordion effect in a Cell List?GWT：如何在 Cell List 中实现手风琴效果？
【发布时间】：2012-05-12 19:55:23
【问题描述】：

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

手风琴效果可以通过 StackPanel 来实现。但是，我还希望 CellList 和 AsyncDataProvider 提供的分页和访问远程数据的便利性。 looks like 两者将在 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），它们仍然会延伸整个原始长度。这意味着如果您单击单元格列表“应该”的位置下方，将触发选择事件。如果我可以直接访问和设置__idx div 的样式，则可以解决此问题，但恐怕这是一个非常肮脏的黑客攻击。有没有更好的方法来做到这一点？

【问题讨论】：

标签： css gwt accordion rpc celllist

【解决方案1】：

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

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

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

【讨论】：

SelectionHandler 是否会为我提供对单元格本身的访问权限？
否，但您可以将SelectionModel 提供给单元格，以便它们可以访问正在呈现的项目的选定状态。我不记得它是怎么回事，但如果选择更改不会自动触发重绘，您可以在 CellList 上调用 redraw() 以强制重新渲染。
很高兴知道。那行得通，但现在我遇到了另一个问题。（OP 已更新。）
设置单元格样式就像提供您自己的CellList.Resources 和CellList.Style 一样简单。
这将对所有单元格应用一种样式，但我想做的是对每个单元格应用不同的样式规则（以获得手风琴效果）。