1

複数のページで ui:repeat を実行する方法を知りたいのですが、前/次ボタンをクリックして次のデータ セットを表示します。

現在、私は ui:repeat を持っています

<ui:repeat id="repeat5" value="#{getData.data}" var="lst2" varStatus="loop">

コンテンツ (基本的に画像) を行/列で表示できますが、すべてのデータが同じ画面に表示されますが、5 行と 4 列のみを表示し、前/次ボタンを使用して残りの画像を表示したいと考えています。 5行4列のレイアウト。

現在、以下のような列構成のみを指定できます。指定された行を取得するにはどうすればよいですか。

<h:panelGrid  id="panelGrid3" columns="4" cellspacing="2" cellpadding="2">

更新 1 (Rasmus Franke のコード)

Pls は、あなたが要求したコードを見つけます。

<h:form id="mainForm">
<p:tabView id="tabView" >
    <p:tab title="Image Viewer" id="Viewer" titleStyle="height:30px">
        <p:layout>
        <p:layoutUnit id="layoutEast" position="east" size="350" style="height:200px">
                        <p:commandButton type="button" onclick=""  
                                         icon="ui-icon-circle-triangle-w"/>  
                        <p:commandButton type="button" onclick="switchPage(1,29);"  
                                         icon="ui-icon-circle-triangle-e"/>
                        <h:panelGrid  id="panelGrid3" columns="5" cellspacing="2" cellpadding="2">
                            <ui:repeat id="repeat5" value="#{getData.data}" var="imagesLst2" varStatus="loop">
                                    <h:panelGroup>
                                        <p:commandLink id="cl3" action="#{getData.imageID(imagesLst2.imageID)}" update=":mainForm:tabView:example">
                                            <p:graphicImage id="gi3" value="#{imagesStreamer.image}" styleClass="bord" 
                                                            onmousedown="mouseDown(this)" alt="image not available3"  width="60" height="60"
                                                            style="#{loop.index > 29 ? 'visibility: hidden;' : ''}">
                                                <f:param name="id5" value="#{imagesLst2.imageID}" />
                                            </p:graphicImage>
                                        </p:commandLink>
                                    </h:panelGroup>
                            </ui:repeat>
                        </h:panelGrid>
                    </p:layoutUnit>
        </p:layout>
    </p:tab>
</p:tabView>

4

2 に答える 2

0

ui:repeat にはオフセットとサイズがあり、マネージド Bean にロジックを実装する必要があるページネーションを行うのに役立つことがわかりました (単純に、画像の数、表示された画像を追跡し、前と次の数字を増減し続けます)ボタン [ページネーションを制御します])。

于 2012-07-09T12:11:57.640 に答える
0

ページネーションをサーバー側とクライアント側のどちらで機能させたいですか?

サーバー側の場合: マネージド Bean でプロパティを作成し、それをページネーション値に設定する必要があります。たとえば、5 ページの値 5 を取得する int です。そのページのデータ。この方法では、各ページに表示される関連データをフェッチするだけで済みますが、通常の投稿または ajax を介して、ページネーションのクリックごとに http リクエストを行う必要があります。

クライアント側の場合: すべてのページのすべてのデータを ui:repeat に含めて、クライアント側で JavaScript を変更できるようにする必要があります。というか、今のまま。「visibility: hidden;」を追加 最初のページのサーバー側を除くすべての行にstyle="#{loop.index > x ? 'visibility: hidden;' : ''}"、x は表示される行数です。次に、ページ番号とページごとの要素数のパラメーターを使用して、ページが変更されたときに呼び出される JavaScript 関数を作成します。

function switchPage(page, numPerPage){
    var first = (page-1) * numPerPage;
    var last = (page) * numPerPage;
    $('#panelGrid3 tr').show();
    $('#panelGrid3 tr').each(function(i, e){
        if(i >= first || i <= last){
           $(e).show();
        }else{
           $(e).hide();
        }
    });
}
于 2012-06-25T11:13:07.477 に答える