0

I need to change in CustomPagingPanel DropDownChoice where I collect information about paging like [1-50], [51-100], to ListView.So I have a code:

// Ajax DropDownChoice used as Page navigator
    pagingDropDownChoice = new DropDownChoice("pagesDropDown", new PropertyModel(this, "currentPage"), new PropertyModel(this, "pages"), new ChoiceRenderer("period", "pageNum"));
    pagingDropDownChoice.add(new AjaxFormComponentUpdatingBehavior("onchange") {

        @Override
        protected void onUpdate(AjaxRequestTarget target) {

            criteria.setPageNum((int)currentPage.getPageNum());
            updatePagingList(target);
            setLinkVisibility();                
            target.add(pagingSizeLabel);
            target.add(pagingDropDownChoice);
            target.add(nextLink);
            target.add(previousLink);
        }
    });
    add(pagingDropDownChoice.setOutputMarkupId(true));

The problem is DropDownChoice in Wicket generates <select> tags, I need <ul><li> tags in HTML markups.

4

2 に答える 2

0

ここで何を達成しようとしているのか、まだ少し混乱していますが、暗闇の中で突き刺します.

私の理解が正しければ、タグにDropDownChoice適用する必要があるため、から離れて、リストを扱うものであるため、に変更する必要があります。私の推測では、ドロップダウンと同じ方法で選択肢を生成するコンポーネントが必要なだけです (つまり、リストの項目はドロップダウンの項目と同じになります)。<select>ListView

最初のステップは、ドロップダウンと同じ情報をレンダリングする ListView を再作成することです。つまり、もしあなたが

<select>
    <option>1-50</option>
    <option>51-100</option>
</select>

次に、取得したいものは次のとおりです。

<ul>
    <li>1-50</li>
    <li>51-100</li>
</ul>

機能する方法ListViewは、付けたタグを数回繰り返すことで、毎回その内容をカスタマイズするオプションを提供します。したがって、これを行う必要がある方法は次のようになります

<ul>
    <li wicket:id="your-list-view"></li>        
</ul>

ListViewを ID 付きでyour-list-viewアタッチするとListView、 のモデルにあるアイテムの数だけタグが繰り返され、ListView毎回タグの内部を構成する機会が与えられます。今、あなたがやりたいことをするためにコンテンツをどうしたいかはよくわかりませんが、次のいずれかになると思います：

  • ajax onClick 動作がアタッチされた Label コンポーネント
  • リンク コンポーネント

どちらの方法を選択しても、次のことは同じでなければなりません。マークアップは繰り返されるため、それらのすべてにリンク/ラベルが必要です。したがって、マークアップの例は次のようになります (リストにラベルを入力していると仮定します)

<ul>
    <li wicket:id="your-list-view"><span wicket:id="label"></span></li>        
</ul>

それがそのマークアップです。バックグラウンドで、ListView を作成する必要があります。そのモデルは、 の各行の表示に関する情報を推測できるモデルになる<ul>ため、 を に変換しDropDownChoiceますListView。ListView のモデルは、ドロップダウンで利用可能なすべての選択肢のモデルとして使用されるため、次のようになります。

ListView yourListView = new ListView("your-list-view", new PropertyModel(this, "pages")){
            @Override
            protected void populateItem(ListItem item) {
                //TODO
            }
        };

「ページ」プロパティは、利用可能なページを決定するもののリストであると想定しています。

各リストを表示するpopulateItem方法は、ListView のメソッドで行う必要があります。私が使用した例はラベルを使用していたため、レンダラーが選択肢をレンダリングしたのと同じ方法でラベルを構成する必要があります。それがどのように行われていたのかよくわからないので、それが toStringed のモデルであると仮定します (モデルのクラスを提供していないように見えるため..)

ListView yourListView = new ListView("your-list-view", new PropertyModel(this, "pages")){
            @Override
            protected void populateItem(ListItem item) {
                item.add(new Label("label", item.toString()));
            }
        };

最後に、必要な「onClick」動作を追加する必要があります。これで、この部分は多少フリーフォームになりました。を追加してAjaxEventBehavior、その動作のイベントで必要なことを行うか、AjaxLink代わりにラベルの代わりにコンポーネントを使用しonClick()て、リンクのメソッドで同じことを行うことができます。それはあなたの選択ですが、それはかなり簡単です。それについて詳しく説明する必要がある場合はコメントしてください。

于 2014-05-14T12:02:41.210 に答える
0

@DomasPoliakasどうもありがとう、あなたの反応はとても役に立ちました。明確にするために、私のJavaコードがあります：

public abstract class AjaxPagingPanel extends Panel{
private Criteria criteria;
private List<Page> pages; 
private Page currentPage;    
private long listSize;
private int pagesCount;
private DropDownChoice pagingDropDownChoice;
private Label pagingSizeLabel;
private AjaxLink previousLink;
private AjaxLink nextLink;

public AjaxPagingPanel(String id, Criteria pagingCriteria) {
    super(id);

    criteria = pagingCriteria;
    listSize = criteria.getResultSize();
    pagesCount = (int) Math.ceil((double) listSize / criteria.getPageSize());

    long pageSize = pagingCriteria.getPageSize();
    currentPage = new Page(pagingCriteria.getPageNum(), (pagingCriteria.getPageNum() - 1) * pageSize + 1, Math.min( pagingCriteria.getPageNum() * pageSize, pagingCriteria.getResultSize()) ); // Model for DropDownChoice

    pages = new ArrayList(pagesCount);
    for (int i = 0; i < pagesCount; i++) {
        pages.add(new Page(i + 1, i * pageSize + 1, Math.min((i + 1) * pageSize, pagingCriteria.getResultSize()) ));            
    }

    // Label updated by ajax to render listSize
    pagingSizeLabel = new Label("pageSize", new PropertyModel(this, "listSize"));
    add(pagingSizeLabel.setOutputMarkupId(true));

    // Ajax DropDownChoice used as Page navigator
    pagingDropDownChoice = new DropDownChoice("pagesDropDown", new PropertyModel(this, "currentPage"), new PropertyModel(this, "pages"), new ChoiceRenderer("period", "pageNum"));
    pagingDropDownChoice.add(new AjaxFormComponentUpdatingBehavior("onchange") {

        @Override
        protected void onUpdate(AjaxRequestTarget target) {

            criteria.setPageNum((int)currentPage.getPageNum());
            updatePagingList(target);
            setLinkVisibility();                
            target.add(pagingSizeLabel);
            target.add(pagingDropDownChoice);
            target.add(nextLink);
            target.add(previousLink);
        }
    });
    add(pagingDropDownChoice.setOutputMarkupId(true));

    add(previousLink = new IndicatingAjaxLink("previousLink"){

            @Override
            public void onClick(AjaxRequestTarget target) {
                if (criteria.getPageNum() > 1) {                    
                    criteria.setPageNum(criteria.getPageNum() - 1);
                    int index = pages.indexOf(currentPage);
                    currentPage = pages.get(index - 1);       
                    updatePagingList(target);
                    setLinkVisibility();
                    target.add(pagingSizeLabel);
                    target.add(pagingDropDownChoice);
                    target.add(nextLink);
                    target.add(previousLink);
                }
            }
    });
    previousLink.setOutputMarkupPlaceholderTag(true);


    // Next link of Page navigator
    add(nextLink = new IndicatingAjaxLink("nextLink"){

            @Override
            public void onClick(AjaxRequestTarget target) {
                if (criteria.getPageNum() < pagesCount) { 

                    criteria.setPageNum(criteria.getPageNum() + 1);     
                    int index = pages.indexOf(currentPage);
                    currentPage = pages.get(index + 1);
                    updatePagingList(target);
                    setLinkVisibility();
                    target.add(pagingSizeLabel);
                    target.add(pagingDropDownChoice);
                    target.add(nextLink);
                    target.add(previousLink);
                }
            }
    });
    nextLink.setOutputMarkupPlaceholderTag(true);

    setLinkVisibility();
}

public Page getCurrentPage() {
    return currentPage;
}

public void setCurrentPage(Page currentPage) {
    this.currentPage = currentPage;
}

public final void setLinkVisibility() {
    if (criteria.getPageNum() == 1) {
        previousLink.setVisible(false);
    } else {
        previousLink.setVisible(true);
    }

    if (criteria.getPageNum() == pagesCount || pagesCount == 0) {
        nextLink.setVisible(false);
    } else {
        nextLink.setVisible(true);
    }
}

// Method must be overrided by a class which is using AjaxPagingPanel
public abstract void updatePagingList(AjaxRequestTarget target);

// Method to refresh the AjaxPagingPanel, for example after Ajax search
public void refresh(Criteria pagingCriteria, AjaxRequestTarget target) {
    criteria = pagingCriteria;
    listSize = criteria.getResultSize();
    pagesCount = (int) Math.ceil((double) listSize / criteria.getPageSize());

    long pageSize = pagingCriteria.getPageSize();
    currentPage = new Page(pagingCriteria.getPageNum(), (pagingCriteria.getPageNum() - 1) * pageSize + 1, Math.min( pagingCriteria.getPageNum() * pageSize, pagingCriteria.getResultSize()) ); 

    pages.clear();
    for (int i = 0; i < pagesCount; i++) {
        pages.add(new Page(i + 1, i * pageSize + 1, Math.min((i + 1) * pageSize, pagingCriteria.getResultSize()) ));            
    }

    pagingDropDownChoice.modelChanged();
    setLinkVisibility();
    target.add(pagingSizeLabel);
    target.add(pagingDropDownChoice);
    target.add(nextLink);
    target.add(previousLink);
}

/**
 * This class is used as a model class in DropDownChoice component and
 * provides list of page as [1-50] [51-100] [101-150] [151-200]...
 */
public class Page implements Serializable{
    private long pageNum;
    private long firstPage;
    private long lastPage;

    public Page(long pageNum, long firstPage, long lastPage) {
        this.pageNum = pageNum;
        this.firstPage = firstPage;
        this.lastPage = lastPage;
    }

    public long getPageNum() {
        return pageNum;
    }

    public void setPageNum(long pageNum) {
        this.pageNum = pageNum;
    }

    public String getPeriod() {
        return Long.toString(firstPage) + "-" + Long.toString(lastPage);
    }

    @Override
    public boolean equals(Object obj) {
        if(!(obj instanceof Page)){
            return false;
        }
        return this.pageNum == ((Page)obj).pageNum;

    }

    @Override
    public int hashCode() {
        int hash = 7;
        hash = 59 * hash + (int) (this.pageNum ^ (this.pageNum >>> 32));
        return hash;
    }

}

}

私の古い HTML マークアップ: ` 

    <table cellpadding="0" cellspacing="3" border="0">
        <tr>
            <td>
                <span class="td2">&nbsp;<wicket:message key="selected"/>: </span>
                <span class="td1" wicket:id="pageSize"/>&nbsp;&nbsp;-&nbsp;&nbsp;
                <a wicket:id="previousLink" class="listLink">&lt;&lt;<wicket:message key="previousPage"/>&nbsp;</a>
                <select wicket:id="pagesDropDown" class="input"/>
                <a wicket:id="nextLink" class="listLink">&nbsp;<wicket:message key="nextPage"/>&gt;&gt;</a>
            </td>
        </tr>
    </table>
</wicket:panel>

`

そして、ページ ナビゲーションを含む DropDown の部分を変更する必要があります。

<div class="pull-right"> <div class="btn-group"> <a href="#" class="btn btn-default"> <i class="ico ico-prev"></i> </a> <div class="dropdown2 inline"> <a href="#" class="btn btn-default btn-shorter"> <strong>1-8</strong> </a> <ul class="dropdown-menu spec_width"> <li><a data-ico="1" href="#">10-30</a></li> <li><a href="#">30-40</a></li> <li><a href="#">40-50</a></li> <li><a href="#">50-60</a></li> </ul> </div> <a href="#" class="btn btn-default"> <i class="ico ico-next"></i> </a> </div> <span class="page-title">из <strong>45</strong></span> </div>

于 2014-05-16T03:34:44.217 に答える