移动端获取数据列表

来源：互联网发布：中国企业网络黄页编辑：程序博客网时间：2024/05/16 05:57

第一步编写后台数据接口

    @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);});//获得列表htmlfunction 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){        }    });

0 0