java - 在 Wicket 中将 DropDownChoice 更改为 ListView

Question

我需要在 CustomPagingPanel DropDownChoice 中更改我收集有关分页的信息（如 [1-50]、[51-100]）到 ListView。所以我有一个代码：

// 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>标签，我需要<ul><li>HTML 标记中的标签。

score 0 · Accepted Answer

@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 更改部分，其中包含页面导航：

score 0 · Accepted Answer

我仍然对您在这里要达到的目标感到有些困惑，但是我会在黑暗中尝试一下。

如果我理解正确，您想远离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>，因此将 a 转换DropDownChoice为 aListView我相信 ListView 的模型应该是您的模型用作下拉列表中所有可用选项的模型，例如：

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

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

您显示每个列表的方式现在应该在populateItemListView 的方法中完成。由于我使用的示例是带有标签的，因此您必须以与渲染器呈现选项相同的方式配置标签。我不确定那是怎么做的，所以我假设它是模型 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()链接的方法中执行相同的操作。这是您的选择，但这很简单。如果您需要详细说明，请发表评论。

java - 在 Wicket 中将 DropDownChoice 更改为 ListView

2 回答 2

Related

Reference