0

Play フレームワーク (バージョン 1.x) のページネーション モジュールについて質問があります。ページごとに 1 つのオブジェクトのみを表示するようにページネーションを設定し、コントローラーでその他のカスタマイズされた設定をいくつか行いました。

import java.util.ArrayList;
import java.util.List;

import play.modules.paginate.ValuePaginator;
import play.mvc.Controller;

public class Application extends Controller {

public static void index() {

    List<String> strings = new ArrayList<String>();
    strings.add("Kalle");
    strings.add("Karin");
    strings.add("Dixie");
    strings.add("Edvin");
    strings.add("Gustav");
    strings.add("Axel");

    int pos = 0;

    for(String str : strings){
        if(str.equals("Axel")){
            pos += strings.indexOf(str);
            break;
        }
    }

    ValuePaginator namePaginator = new ValuePaginator(strings);
    namePaginator.setPageSize(1);
    namePaginator.setBoundaryControlsEnabled(false);
    namePaginator.setPagesDisplayed(0);

    renderArgs.put("pos", pos);
    renderArgs.put("namePaginator", namePaginator);
    render();
}

そしてテンプレートで：

#{extends 'main.html' /}
#{set title:'Home' /}

*{#{welcome /}}*
${pos}
#{paginate.controls items:namePaginator /}

#{paginate.list items:namePaginator, as:'name'}
${name}
#{/paginate.list}

*{#{list items:strings[pos], as:'string'}
${string}
#{/list}}*

さて、テンプレートの最後の部分に見られるように、通常の groovy リスト タグを使用したコメント部分があります。実際のリストがあるので、指定された位置 "pos" からリストを強制的に開始できます。ただし、ページネーションを使用する場合は不可能です。「items:namePaginator」の場合、それは基になるリストの単なる名前プレースホルダーであり、実際には反復可能ではありません。ラップされたリスト内の指定された位置からページネーションを開始する方法はありますか?

どうもありがとう ！

4

1 に答える 1

0

このページネーションの特殊なケースでは、Play Frameworks ページネーション モジュールを使用する代わりに、JQuery を使用して問題を解決することができました。

原則は次のようになります。コントローラーのアクションでは、好みのオブジェクトで構成される通常の Java ArrayList が使用されます。この ArrayList は、含まれている Gson ライブラリ (Play Framework 内) を使用して jsonObject に変換されます。

Gson gson = new Gson();
String jsonObj = gson.toJson(objects);

使用することで

renderArgs.put("jsonObj", jsonObj);

json をテンプレートに渡すコントローラー アクションで、そもそもこれをすべて行う理由は、オブジェクトのリスト内の任意の位置からクライアント側のオブジェクトを介して "ページ付け" を開始できるようにするためでした。テンプレートの非表示の div。

次に、JQuery を使用してリストを取得します。

$.parseJSON($('#myhiddenlist'));

そして、再び JQuery を使用してリストを前後に移動し (前と次のアンカー タグでクリック イベントをキャッチ)、ページごとにそれぞれのオブジェクトを表示します。JQuery (または javascript) を使用するもう 1 つの利点は、Play Frameworks のページネーション モジュールの場合のように、ページのリロードについて心配する必要がないことです。

JQueryパート

    $(function(){
    var ourlist = $('#ourlist').text();
    var jsonOur = $.parseJSON(ourlist);
    var length = jsonOur.length; 
    var pos = parseInt($('#ourpos').text());
    var showList = $('#showlist');


    showList.append(jsonOur[pos].name);
    initControls();

    function hasPrev(){
        if(pos > 0){
            return true;
        }else{
            return false;   
        }
    }

    function hasNext(){
        if(pos < (length - 1)){
            return true;    
        }else{
            return false;
        }

    }

    function showItem(pos){
        showList.empty();
        showList.append(jsonOur[pos].name);
    }

    $('.previous a').click(function(e){

        if(hasPrev()){pos--;}
        if(hasPrev()){
                $('li.next').removeClass('off');
                $('li.next a').css('color', 'blue');
        }else{
            $('li.previous').addClass('off');
            $('li.previous.off a').css('color', 'grey');
        }
        showItem(pos);
    });

    $('.next a').click(function(e){

        if(hasNext()){pos++;}
        if(hasNext()){
            $('li.previous').removeClass('off');
            $('li.previous a').css('color', 'blue');
        }else{
            $('li.next').addClass('off');
            $('li.next.off a').css('color', 'grey');
        }
        showItem(pos);
    });

    function initControls(){
        if(hasNext()){
            $('li.previous').removeClass('off');
        }else{
            $('li.next').addClass('off');
            $('li.next.off a').css('color', 'grey');
        }
        if(hasPrev()){
                $('li.next').removeClass('off');
        }else{
            $('li.previous').addClass('off');
            $('li.previous.off a').css('color', 'grey');
        }
    }

    //for testing only
    function showPos(pos){
        console.log(pos);
    }
});

HTML 部分

#{extends 'main.html' /}
#{set title:'Home' /}
#{content.rightside Pos: pos /}<!-- loads the side content -->
<div id="ourlist" class="hide">${jsonOurList}</div>
<div id="ourpos" class="hide">${pos}</div>
<ul class="pagination">
<li class="previous"><a href="#">Prev</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
<div id="showlist"></div>

CSS部分

ul.pagination li {
display: inline;
}
ul.pagination li a {
outline: none;
text-decoration: none;
}
li.previous.off a,
li.next.off a {
color: grey;
cursor: default;
}
li.previous a,
li.next a {
color: blue;
cursor: pointer;
}
.hide {
display: none;
}

わかりました、これは実際には Play モジュールを微調整するためのソリューションではなく、JQuery を使用したより実用的なアプローチです。

これが同様の問題を抱えている人に役立つことを願っています。

//カレ

于 2012-09-29T00:15:34.513 に答える