0

ヘッダーと本文を含むウィジェットの RPC 生成リストがあります。ヘッダーのみを表示して、それらを垂直に表示したいと思います。ユーザーがヘッダーをクリックすると、対応する本文が下にスライドして表示され、他の開いている本文はスライドして表示されなくなります。

アコーディオン効果は StackPanel で実現できます。ただし、CellList と AsyncDataProvider によって提供されるリモート データへのページングとアクセスの容易さも必要です。この2 つは 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)、元の長さ全体を伸ばします。これは、セル リストが「あるべき」場所の下をクリックすると、選択イベントが発生することを意味します。これは、div に直接アクセスしてスタイルを設定できれば修正できますが__idx、恐ろしく汚いハックだと思います。これを行うより良い方法はありますか？

4

1 に答える 1

1

GWT 2.5 が追加するのは、 (または)内CellTableの単一のアイテムに対して複数の行を作成する方法です。DataGridsについては何も変更されませんCellList。また、イベントを処理して行を展開/折りたたむこと、おそらくそれらをアニメーション化することも引き続き担当し、最大でも 1 つの展開された行も無料ではありません。

全体として、ユースケースでは何も変わりません。

セルのレンダリング/イベント処理で、この展開/折りたたみ動作をベイクする必要があります。他の行を折りたたむ場合は、DOM をリスト レベルから処理する必要があります (つまり、折りたたみ可能なすべての要素を見つけて、それらが折りたたまれていることを確認してから、必要な行を展開します)。
または、たとえばNoSelectionModelorSingleSelectionModelを使用して、選択した/最後に選択したアイテムを展開してレンダリングし、他のアイテムを折りたたむこともできます (SelectionHandler必要に応じて から再描画をトリガーします)。ただし、おそらくアニメーションは失われます。

于 2012-05-12T22:54:32.540 に答える