首页 > 代码库 > 如何调整wicket的PagingNavigator的html输出

如何调整wicket的PagingNavigator的html输出

2024-10-23 06:35:39   211人阅读

这是默认模板：

<wicket:panel>
	<a wicket:id="first" class="first">&lt;&lt;</a>
	<a wicket:id="prev" class="prev">&lt;</a>
	<span wicket:id="navigation" class="goto">
		<a wicket:id="pageLink" href="http://www.mamicode.com/#"><span wicket:id="pageNumber">5</span></a>
	</span>
	<a wicket:id="next" class="next">&gt;</a>
	<a wicket:id="last" class="last">&gt;&gt;</a>
</wicket:panel>

当然最外围的tag由该组件的模板决定。比如外围用div：

<div wicket:id="mypaginator"></div>

现在假设需要purecss样式的pagingNavigator，它的html如下：

<ul class="pure-paginator">
    <li><a class="pure-button prev" href="http://www.mamicode.com/#">&#171;</a></li>
    <li><a class="pure-button" href="http://www.mamicode.com/#">1</a></li>
    <li><a class="pure-button pure-button-active" href="http://www.mamicode.com/#">2</a></li>
    <li><a class="pure-button" href="http://www.mamicode.com/#">3</a></li>
    <li><a class="pure-button" href="http://www.mamicode.com/#">4</a></li>
    <li><a class="pure-button" href="http://www.mamicode.com/#">5</a></li>
    <li><a class="pure-button next" href="http://www.mamicode.com/#">&#187;</a></li>
</ul>

可见两者的差别还是不少。让我们看看可能的方法：

1、新建一个类，继承PagingNavigator。

    比如类名称是PagingNavigator，然后建立对应的模板文件PagingNavigator.html，内容如下：

<ul class="pure-paginator">
    <li><a wicket:id="first" class="pure-button first" href="http://www.mamicode.com/#">&#171;</a></li>
    <li><a wicket:id="prev" class="pure-button prev" href="http://www.mamicode.com/#">&#171;</a></li>
    <li wicket:id="navigation"><a wicket:id="pageLink" class="pure-button" href="http://www.mamicode.com/#"><wicket:container wicket:id="pageNumber"></wicket:container></a></li>
    <li><a wicket:id="next" class="pure-button next" href="http://www.mamicode.com/#">&#187;</a></li>
    <li><a wicket:id="last" class="pure-button last" href="http://www.mamicode.com/#">&#187;</a></li>
</ul>

这样子画出来的PagingNavigator的就是purecss样式的。但是还需要完善，当前页的样式，没有最后一页的时候按钮应该disabled。也就是说根据当前页的情况需要添加pure-button-disabled，或者pure-button-active样式。

为了达成这个功能，我们需要更深的探究PagingNavigator类，看看哪里可以实现这个功能。

对照上面的模板，其中wicket:id="navigation"对应的是PagingNavigation组件，其中有一个方法是：

@Override
	protected void populateItem(final LoopItem loopItem)
	{
		// Get the index of page this link shall point to
		final long pageIndex = getStartIndex() + loopItem.getIndex();

		// Add a page link pointing to the page
		final AbstractLink link = newPagingNavigationLink("pageLink", pageable, pageIndex);
		link.add(new TitleAppender(pageIndex));
		loopItem.add(link);

		// Add a page number label to the list which is enclosed by the link
		String label = "";
		if (labelProvider != null)
		{
			label = labelProvider.getPageLabel(pageIndex);
		}
		else
		{
			label = String.valueOf(pageIndex + 1);
		}
		link.add(new Label("pageNumber", label));
	}

其中TitleAppender用来添加link的title属性，这样鼠标移到上面的时候就会提示，比如goto 2 page等等。接下来是label，就是pageNumber对应的组件。

可以通过复写这个方法，根据情况对label进行修饰（AttributeModifier），最终达到需要的效果。


如何调整wicket的PagingNavigator的html输出


联系
我们