0
내가 아약스 페이징 탐색을위한 HTML 마크 업을하는 것은 좋아한다 :ListView를 사용하여 Wicket에서 Ajax 페이징 탐색을 생성하는 방법은 무엇입니까?
<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>
사용자가 데이터가 변경되는 페이지의 간격 (10 ~ 30, 30 ~ 40 등)을 선택 (아약스). wicket에서 ListView를 사용하여 구현할 수 있습니까?
ListView yourListView = new ListView("your-list-view", new PropertyModel(this, "pages")){
@Override
protected void populateItem(ListItem item) {
item.add(new Label("label", item.toString()));
}
};
및 마크 업 : 나는 떨어지게처럼해야한다고 생각
<ul><li wicket:id="your-list-view"><span wicket:id="label"></span></li></ul>
내가 정확히 DropDownChoice으로 작업을 수행하는 방법을 알고,하지만 내가 가지고 있기 때문에, 내 경우에는 적합하지 않다 <select><option></option></select> 태그 대신 <ul><li></li></ul>을 생성하십시오.
P/s의 : DropDownChoice으로 작업을 수행하는 방법을 예제 :
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;
}
}