Измените DropDownChoice на ListView в калитке

Мне нужно изменить в 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));

Проблема в том, что DropDownChoice в Wicket генерирует <select> теги мне нужны <ul><li> теги в разметке HTML.

Источник

2 ответа

Решение

Я все еще немного озадачен тем, чего ты пытаешься достичь здесь, но я сделаю удар в темноте.

Если я правильно понимаю, вы хотите отойти от 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 с удостоверением личности your-list-view, ваш ListView будет повторять тег столько раз, сколько есть элементов в модели вашего ListView, давая вам возможность каждый раз настраивать тег внутри. Теперь я не совсем уверен, что вы хотите, чтобы содержимое было для того, чтобы оно делало то, что вы хотите сделать, но я предполагаю, что это будет либо:

  • компонент Label с прикрепленным поведением ajax onClick
  • Компонент ссылки

Независимо от того, какой путь вы выберете, следующее должно быть одинаковым. Поскольку разметка будет повторяться, вы хотите иметь ссылку / ярлык в каждом из них. Таким образом, пример разметки будет (при условии, что вы заполняете список метками)

<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
            }
        };

Я предполагаю, что свойство "pages" - это список того, из чего вы определяете доступные страницы.

Способ отображения каждого списка теперь должен быть выполнен в 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() метод ссылки. Это ваш выбор, но это довольно просто. Прокомментируйте, если вам нужно уточнить это.

Источник

@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>

Источник
Другие вопросы по тегам