将DropDownChoice更改为Wicket中的ListView

时间：2014-05-13 09:23:14

标签： java listview wicket dropdownchoice

我需要在CustomPagingPanel DropDownChoice中更改我收集有关分页的信息，如[1-50]，[51-100]，到ListView.So我有一个代码：

// 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));

问题是Wicket中的DropDownChoice会生成<select>个标记，我需要HTML标记中的<ul><li>个标记。

2 个答案:

答案 0 :(得分：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的{​​{1}}，您your-list-view将重复标记的次数与ListView模型中的项目一样多次，为您提供每次都有机会配置标签内部。现在我不太确定你想要的内容是什么，以便它做你想做的事情，但我认为它将是：

  • 附带了ajax onClick行为的Label组件
  • 链接组件

无论您选择哪种方式，以下内容都必须相同。由于将重复标记，因此您希望在每个标记中都有一个链接/标签。因此，示例标记将是（假设您使用标签填充列表）

ListView

这是它的标记。在后台，您必须创建一个ListView，其模型将是一个模型，您可以从中推断出<ul> <li wicket:id="your-list-view"><span wicket:id="label"></span></li> </ul> 中每行显示的信息，因此将<ul>转换为{{ 1}}我相信ListView的模型应该是您用作下拉列表中所有可用选项的模型的模型，所以类似于：

DropDownChoice

我假设“pages”属性是您确定可用页面的列表。

现在，您应该在ListView的ListView方法中完成显示每个列表的方式。由于我使用的示例是Label，因此您必须以与渲染器呈现选项相同的方式配置标签。我不确定是怎么做的，所以我只是假设它是模型toStringed（因为你似乎没有提供类型的模型..）

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

您需要做的最后一部分是添加所需的“onClick”行为。现在这部分有点自由形式了。您可以添加populateItem并对该行为的事件执行您想要的操作，也可以使用ListView yourListView = new ListView("your-list-view", new PropertyModel(this, "pages")){ @Override protected void populateItem(ListItem item) { item.add(new Label("label", item.toString())); } }; 组件而不是标签，然后在AjaxEventBehavior方法中执行相同操作链接。这是你的选择，但这是相当简单的。评论，如果你需要详细说明。

答案 1 :(得分：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>

相关问题
最新问题