第一步 编写后台数据接口
@Clear
public void news() {
render("list_news.html");
}
@Clear
public void getNewsList() {
Integer pageNum = this.getParaToInt("pageNum" , 1);
/****** 返回包含 page对象 的result ***********/
renderJson(Blog.dao.getListJson( pageNum , 10 ));
}
第二步 在 list_news.html
中编写html结构代码
- 为该列表自定义一个id:newsList
- 为父级容器
#newsList
写一个请求地址标记data-url
- 为父级容器
#newsList
写一个模板的选择标记,用于据此选择模板。该模板务必写入script标签中。 - 在父级容器
#newsList
中写一个加载更多的按钮,固定class为:.getMoreDataBtn
,该按钮href指向父级容器。
<!--新闻列表 s-->
<div id="newsList" data-url="${ctx}/list/getNewsList?type=${type}" data-modal="#listItem">
<!--新闻模板s-->
<script type="text/html" id="listItem">
<div class="item">
<div class="img-right">
<a href="${ctx}/info/blog/N.blogId.L" class="right">
<img src="${ctx}N.firstPic.L" alt="">
</a>
</div>
</div>
</script>
<!--新闻模板e-->
<a href="#newsList" class="getMoreDataBtn">加载更多…</a>
</div>
第三步 引入加载数据的js代码
//加载数据
var moreDataJson = {
dealData : function(){
} ,
completed : function(){
}
} ;
(function($){
$.fn.fillHtml = function(jsons){ //该方法用于将json数据填充至html中,返回html字符串
var obj = this ;
var html = obj.getInnerHtml() ;
for (key in jsons) {
var holder = new RegExp("N." + key + ".L" , "g") ;
html = html.replace( holder , jsons[key]);
}
return html ;
} ;
$.fn.getInnerHtml = function(){
var obj = this ;
var parent = $('<div></div>');
parent.html(obj);
return parent.html();
} ;
$.fn.getMoreData = function( dealFn ){
//初始化回调函数
if(null == moreDataJson ) {
moreDataJson = dealFn ;
}
var ts = this ;
var btns = ts.find('.getMoreDataBtn') ;
var modals = ts.data('modal') ;
var url = ts.data('url') ;
var pageNum = !ts.attr('data-pageNum') ? 1 : ts.attr('data-pageNum') ;
$.post(url ,{ pageNum : pageNum }, function(result){
ts.attr('data-pageNum' , ++pageNum);
var list = result.page.list ;
//处理result的函数
if(jQuery.isFunction(moreDataJson.dealData)){
moreDataJson.dealData(result);
}
//获取列表html
var listObj = getHtmlByJsons( modals , list);
btns.before(listObj);
//处理尾部
if( result.page.totalPage == result.page.pageNumber ){
if(result.page.pageNumber > 1){
btns.before('<div class="endOfFooter">Sorry,没有更多数据啦~~</div>');
}
btns.remove();
}
//处理result的函数
if(jQuery.isFunction(moreDataJson.completed)){
moreDataJson.completed(result);
}
},'json');
} ;
})(jQuery);
//获得更多数据
$('.getMoreDataBtn').on('click',function(e){
e.preventDefault();
var ts = $(this) ;
$(ts.attr("href")).getMoreData(moreDataJson);
});
//获得列表html
function getHtmlByJsons( modalId , jsons , deal){
var arrs = [] ;
var baseHtml = $(modalId).html();
for (var i = 0; i < jsons.length; i++) {
var jsonObj = jsons[i];
var clones = $(baseHtml).clone(true);
var html = clones.fillHtml(jsonObj);
clones = $(html) ;
if(jQuery.isFunction(deal)){
deal(clones , i ) ;
}
arrs.push(clones.getInnerHtml()) ;
}
return $(arrs.join('')) ;
}
第五步 在html中进行调用
- 调用时候可以传入一个json参数,该参数含有两个fn 。
- 第一个是
dealData
, 用于在拼接html之前,处理请求到的数据,可以接收请求到的result参数 ; - 第二个是
completed
, 用于完成所有的操作以后 , 进行额外的操作 , 可以接收请求到的result参数 。
$('#newsList').getMoreData({
dealData : function(result){
var list = result.page.list ;
for (var i = 0; i < list.length; i++) {
var obj = list[i];
var minute = obj.minute ;
var time ;
if ( !minute || minute > 3*24*60) {
time = obj.time ;
}else if (minute < 60) {
time = minute + "分钟前" ;
}else if (minute > 24*60) {
var day = parseInt(minute/(24*60)) ;
time = day + "天前" ;
}else {
var hour = parseInt(minute/60) ;
time = hour + "小时前" ;
}
obj['time'] = time ;
}
} ,
completed : function(result){
}
});