0

JQuery UI タブで Grails データベースからのデータを表示する最良の方法は何でしょうか? 私が望むのは、タブ インターフェイスを持ち、各タブに別のドメインからのレコードのリストがあることです。たとえば、Tab1 には Domain1 のレコード リストが表示され、Tab2 には Domain2 のレコード リストが表示されます。

私は JQuery UI タブ インターフェイスをセットアップして動作させており、現在 createLink を使用してコントローラーからメソッドを呼び出し、適切なドメインのモデルを返しています。タブは次のようになります。

<div id="tabs">
    <ul>
        <li><a href="${createLink(action: 'listHardware')}">Hardware records</a></li>
        <li><a href="${createLink(action:'listModel')}">Model records</a></li>
        <li><a href="${createLink(action:'listBuilding')}">Building records</a></li>

    </ul>       
</div>

コントローラーからのメソッドは次のようになります。

def listHardware() {
    [hardwareList:Hardware.list(), hardwareInstanceTotal:Hardware.count()]      
}

また、「render(view:'HardwareList', model:[hardwareList:Hardware.list(), hardwareInstanceTotal:Hardware.count()]」を使用して、タブ内で GSP 全体をレンダリングしてみましたが、それにはタブが選択されるたびにロードするのに非常に長い時間 (少なくとも 5 秒) がかかり、特に各タブにそれほど時間がかかる場合は、まったく理想的ではありません。

アップデート

以下の Rimero の回答に対する私の回答の 1 つに記載されているように、テンプレートを使用してドメインのデータのテーブルを表示することができました。また、タグを使用して各タブにページネーションを実装しようとしていますが、いずれかのページをクリックして別のページを表示するたびに、タブ インターフェイスの外にある完全なテンプレート自体に移動します。すべてがタブ内に留まるようにタグをフォーマットする方法について何か考えはありますか??

4

1 に答える 1

1

これが私の提案です:

  • たとえば、コントローラーの index メソッドですべてを一度に取得できます。
  • タブのコンテンツをテンプレートとして実装できます (g render template)。各タブ == 1 テンプレート。
  • コントローラの index メソッドからドメイン オブジェクト buildingList などを取得できます。
  • 各タブの g:render テンプレート コードは、レンダリングのためにマップまたはコレクションを渡すだけでよい場合があります。

この場合、コントローラーのエンドポイントへのハイパーリンクは必要ありません。ここのデフォルトの例のように、アンカーをタブ(div id)に保持するだけです-> http://jqueryui.com/tabs/

更新された回答

一度にすべてのデータを送信すると時間がかかるとおっしゃっていたように、非同期でフェッチすることもできます。可能であれば、最初のタブのデータのみを直接入力します。

  • モデルを JSON として返す各タブのビジネス メソッドを作成します。データは、サーバーからまだ取得されていない場合にのみ取得されます (状態を保持するか、たとえば、タブ ID にいくつかの DOM ノードがあるかどうかを確認する必要があります。

  • JQuery を使用して、DOM の準備ができたら、現在のタブを取得します。最初のタブのデータを熱心にフェッチしなかった場合は、ビジー状態の画像が回転しているこの時点でフェッチします。

  • 新しいタブを選択するとすぐに、データが既にフェッチされているかどうかを確認する必要があります。そうでない場合は、ajax 呼び出しを送信し、コールバック関数がタブ div コンテナーにデータを入力します。

それが役に立てば幸い。

于 2013-01-22T23:18:34.480 に答える