beetl渲染Bootstrap Paginator实现过程

电玩女神 2022-09-27 06:27 144阅读 0赞

上篇文章简要介绍了一下beetl的基本信息，本篇文章从beetl的简要渲染过程结合BootStrap的分页控件Paginator的数据绑定过程进行讲解。

我们以maven项目为例，首先看一下beetl在spring mvc框架的集成：

1. 在maven项目中引入jar包：

<dependency>
    		<groupId>com.ibeetl</groupId>
    		<artifactId>beetl</artifactId>
    	</dependency>

2. 添加beetl的配置文件，这个配置文件可以在beetl官网找到。

![20170307212023566][]

3. 在springmvc.xml文件中配置beetl解析器：

<bean name="beetlConfig" class="org.beetl.ext.spring.BeetlGroupUtilConfiguration"
    			init-method="init">
    			<property name="configFileResource" value="classpath:config/beetl.properties" />
    			
    		</bean>
    	
    		
    		<bean name="beetlViewResolver" class="org.beetl.ext.spring.BeetlSpringViewResolver">
    			
    			
    			<property name="config" ref="beetlConfig" />
    			<property name="prefix" value="/views/" />
    			<property name="suffix" value=".html" />
    		</bean>

至此，beetl的配置完成，在项目里面的html页面就可以添加beetl语法了。

下面进行控件数据绑定，Bootstrap Paginator控件的实现效果图如下：

![20170307212313242][]

a. 首先在页面中添加js文件：jquery.js,bootstrap.js,bootstrap-paginator.js

b. 使用beetl渲染得到数据总行数：

![20170307212508034][]

c. 页面隐藏控件获得数据列表总条数：<input id="count" hidden="true" value="$\{pageCount\}">

d.配置参数控件参数：

var pageCount=$("#pageCount").text()==""?Math.ceil(parseInt($("#count").val())/parseInt($("#pageNum").attr("pageSize"))):parseInt($("#pageCount").text());
    			       var options = {
    					        bootstrapMajorVersion:3,
    					        alignment:'center',
    					        currentPage:1,
    					        totalPages:pageCount,
    							onPageClicked: function (event, originalEvent, type, page){ 
    								originalEvent.preventDefault();
    								originalEvent.stopPropagation();
    								loadPageData(page);
    							}
    					};

加载数据拼接过程：

e. 绑定数据：  
$("\#pageNum").bootstrapPaginator(options);

结束！！

参考文章：[https://github.com/lyonlai/bootstrap-paginator][https_github.com_lyonlai_bootstrap-paginator]

[http://blog.csdn.net/lvlvforever/article/details/46625399 ][http_blog.csdn.net_lvlvforever_article_details_46625399]

[20170307212023566]: /images/20220708/809369434cba4ead9fb3a794e0b60ca0.png
[20170307212313242]: /images/20220708/abce29ffb00f48b19ab7459fa8a60dea.png
[20170307212508034]: /images/20220708/0d68be41f3d64747bc8c708931b22660.png
[https_github.com_lyonlai_bootstrap-paginator]: https://github.com/lyonlai/bootstrap-paginator
[http_blog.csdn.net_lvlvforever_article_details_46625399]: http://blog.csdn.net/lvlvforever/article/details/46625399