mybatis ajaxページングに基づく実装

27326 ワード

ブロガーここのajaxページングは、前のカスタムラベルに基づくページングです.その根本的な違いはajaxページングがカスタムラベルの内容をajax方式で実現したことです.だから、このajaxページングもバックグラウンドデータベースページングに属しています.はい、コードを見てください.
1、約束したように、ここでは前の文章のすべてのサービス層とdao層のコードに基づいて、pageを含む.JAvaベースクラスとmybatisのブロッキング実装は、いずれも前の記事と同じで、以上を明らかにしてajaxページングを実現し始めました
1、ajaxでアクセスする以上、control層は普通の方法とは違うに違いない
     @RequestMapping(value="/testajax",method=RequestMethod.POST)
        public ResponseEntity testajax( @ModelAttribute Branch branch ,
                 @RequestParam(required = false, defaultValue = "1") int pageNo,  
                  @RequestParam(required = false, defaultValue = "10") int pageSize, HttpServletRequest request) {

            Page page = Page.newBuilder(pageNo, pageSize, "/branchControl/testajax");
            Map params = new HashMap();

            if(null !=branch.getGeoCode())
                params.put("geoCode", branch.getGeoCode()+"");
            if(null !=branch.getTel())
                params.put("tel", branch.getTel()+"");

            page.setParams(params);

            List mobileFindBranch = branchService.findDeptByGeoCode(branch,page);


            AjaxPageResponse model = new AjaxPageResponse();
            model.addObject("secbranch", mobileFindBranch); 


            if(!"".equalsIgnoreCase(branch.getTel()) && null !=branch.getTel()){
                model.addObject("tel", branch.getTel());
            }

            model.addObject("page", page);
            model.addObject("branch", branch);
            model.setPage(page);

            return new ResponseEntity(model, HttpStatus.OK);
        }

2、以上のコードを通じて、返す結果が違うようですね.はい、ブロガーはModelAndViewクラスを真似て、新しいクラスAjaxPageResponseを作りました.
import java.util.HashMap;
import org.springframework.ui.ModelMap;


public class AjaxPageResponse {

    public Page page;

//  public T t;

    private ModelMap model;

    public AjaxPageResponse() {
    }

    public ModelMap getModelMap() {
        if (this.model == null) {
            this.model = new ModelMap();
        }
        return this.model;
    }


    public AjaxPageResponse addObject(String attributeName, Object attributeValue) {
        getModelMap().addAttribute(attributeName, attributeValue);
        return this;
    }

    public Page getPage() {
        return page;
    }

    public void setPage(Page page) {
        this.page = page;
    }
}

3、基礎類AjaxPageResultMap及びAjaxPageModel
AjaxPageResultMapクラス
import java.util.Collection;
import java.util.LinkedHashMap;
import java.util.Map;

import org.springframework.core.Conventions;
import org.springframework.util.Assert;

public class AjaxPageResultMap extends LinkedHashMap{



    public AjaxPageResultMap() {
    }

    public AjaxPageResultMap(String attributeName, Object attributeValue) {
        addAttribute(attributeName, attributeValue);
    }

    public AjaxPageResultMap(Object attributeValue) {
        addAttribute(attributeValue);
    }

    public AjaxPageResultMap addAttribute(String attributeName, Object attributeValue) {
        Assert.notNull(attributeName, "Model attribute name must not be null");
        put(attributeName, attributeValue);
        return this;
    }

    public AjaxPageResultMap addAttribute(Object attributeValue) {
        Assert.notNull(attributeValue, "Model object must not be null");
        if (attributeValue instanceof Collection && ((Collection) attributeValue).isEmpty()) {
            return this;
        }
        return addAttribute(Conventions.getVariableName(attributeValue), attributeValue);
    }


    public AjaxPageResultMap addAllAttributes(Collection> attributeValues) {
        if (attributeValues != null) {
            for (Object attributeValue : attributeValues) {
                addAttribute(attributeValue);
            }
        }
        return this;
    }


    public AjaxPageResultMap addAllAttributes(Map attributes) {
        if (attributes != null) {
            putAll(attributes);
        }
        return this;
    }

    public boolean containsAttribute(String attributeName) {
        return containsKey(attributeName);
    }



}

AjaxPageModelクラス
import org.springframework.ui.ModelMap;

public class AjaxPageModel {

    private ModelMap model;

    public AjaxPageModel() {
    }

    public ModelMap getModelMap() {
        if (this.model == null) {
            this.model = new ModelMap();
        }
        return this.model;
    }


    public AjaxPageModel addObject(String attributeName, Object attributeValue) {
        getModelMap().addAttribute(attributeName, attributeValue);
        return this;
    }

}

4、そしてもちろん前のブログのカスタムタグ実装の内容をajax実装に変更します
ajaxPageUtil.js実装原理は、元のajax関数にページングの属性値を抽出し、ページングのページスタイルを表示するためのレイヤを追加することである.
function pageClick( pNo ){  
                          if(!pNo){
                              pNo =pageObject.pageNo;
                          }

                            var choosePageSize = $('#choosePageSize').find('option:selected').text(); 

                            var jsPost = function(action, values, valueLists) {  
                                  var ajaxSearchParam={};

                                  for (var key in values) {  
                                      ajaxSearchParam["" + key + ""]=values[key];
                                  }  
                                  for (var key2 in valueLists) {  
                                    for (var index in valueLists[key2]) {  
                                      ajaxSearchParam["'" + key2 + "'"]=valueLists[key2][index];
                                    }  
                                  }  

                                  ajaxSearchParam.pageSize=choosePageSize;
                                  ajaxSearchParam.pageNo=pNo;

        //                        alert("ajaxSearchParam:"+JSON.stringify(ajaxSearchParam));

                                  var ajaxParm ={};
                                  if(ajaxBodyObjectTmp.async){
                                  ajaxParm['async']=ajaxBodyObjectTmp.async;
                                  }
                                  if(ajaxBodyObjectTmp.type){
                                  ajaxParm['type']=ajaxBodyObjectTmp.type;
                                  }
                                  if(ajaxBodyObjectTmp.url){
                                  ajaxParm['url']=ajaxBodyObjectTmp.url;
                                  }
                                  if(ajaxBodyObjectTmp.dataType){
                                  ajaxParm['dataType']=ajaxBodyObjectTmp.dataType;
                                  }
                                  ajaxParm['data']=ajaxSearchParam;
                                  if(successFuction){
                                  ajaxParm['success']=successFuction;
                                  }
                                  if(ajaxBodyObjectTmp.error){
                                      ajaxParm['error']=ajaxBodyObjectTmp.error;
                                  }

                                  $.ajaxPage(ajaxParm);

                            }  
                            //  POST  
                            jsPost(pageObject.searchUrl, paraJson, paraListJson);  
                  }
                  function chPageSize(obj){
                     /* alert(obj.value); */
                     pageClick(1);

                  }

            var ajaxBodyObjectTmp=null;
            var pageObject=null;
            var successFuction =null;
            $(function(){

                function setPageTag(pageObject){

                    var  current =  pageObject.pageNo;  
                    var  begin = 1;  
                    var  end = pageObject.totalPage;  
                    var str="";
                    var nums=0;

                    str+="
"; str+="
"; if (current!=1 && end!=0){ nums =current-1; str+=" のページ"; }else{ str+=" のページ"; } for(var i=0;iif(i + 1 == current){ nums=i+1; str+=""+nums+""; }else{ if(i == 0 || i == 1 || i == 2 || i == 3 || i == current - 2 || i == current - 3 || i == current || i == current + 1 || i == Number(pageObject.totalPage) - 2 || i == Number(pageObject.totalPage) - 1){ nums=Number(i)+1; str+=""+nums+""; }else{ if(i == 4 && current > 7){ str+="..."; } if(i == Number(pageObject.totalPage) - 3 && current < Number(pageObject.totalPage) - 4){ str+="..."; } } } } if (current0){ nums =current+1; str+=" のページ"; }else{ str+=" のページ"; } str+="
"
; str+="
"; str+=" "; str+="; str+=""; str+=""; str+=""; str+=""; str+=" "; str+=" "+pageObject.totalRecord+" "; str+="
"
; str+="
"
; str+="
";
$("#pageTag").html("");
$("#pageTag").append(str);
}
//ajaxのページングを増やすためのもの
//jQueryアプリケーション拡張
jQuery.extend({
ajaxPage:function (ajaxBodyObject) {
ajaxBodyObjectTmp=ajaxBodyObject;
successFuction =ajaxBodyObject.success;
ajaxBodyObject.success=function(ajaxResult){
ajaxResult=eval("("+ajaxResult+")");
paraJson = ajaxResult.page.params;
paraListJson=ajaxResult.page.paramLists;
// alert("paraJson:"+paraJson);
// alert("paraListJson:"+paraListJson);
pageObject=ajaxResult.page;
setPageTag(pageObject);
successFuction(ajaxResult.modelMap);
}
$.ajax(ajaxBodyObject);
}
});
jQuery.extend({
reloadAjaxPage:function () {
pageClick();
}
});
})
5、それからページで使う
まず、ページにjsファイルを導入します.
<script type="text/javascript" src="../js/ajaxPageUtil.js">script>

そして、バックグラウンドコントロールを呼び出す方法を書きます.ここで$.ajaxPageの呼び出し方法と$.ajaxはそっくりで、その後、successメソッドのdataパラメータの使用はcontrol最後のmodelの使用方法と同じで、直接data.secbranchこれにより、controlに格納された値を取り出すことができます
function submit(){
                //           
                var param={};
                param['geoCode']=$("#geoCode").val();
                param['tel']=$("#tel").val();
                $.ajaxPage({
                    async:false,
                    type:"POST", 
                    url:"${pageContext.request.contextPath}/branchControl/testajax", 
                    dataType:"text",      
                    data:param,
                    success:function(data){ 
                         var result =data.secbranch;
                         var str ="";
                         for(var i=0;i"";
                             str+=""+result[i].name+"";
                             str+=""+result[i].address+"";
                             str+=""+result[i].tel+"";
                             str+=""+result[i].businessScope+"";
                             str+=""+result[i].releaseTime+"";
                             str+="";
                             str+="";
                             str+=" ";
                             str+="+result[i].branchId+",'"+result[i].name+"')>";
                             str+="";
                             str+="";
                            }
                         $("#wsltable").children("tbody").html("");
                         $("#wsltable").children("tbody").append(str);
                    },       
                    error:function(e){
                        alert(e);
                    }  
                });
            }

それから、ページングボタンが表示されているところに次のdivを入れなければなりません.
                                    <div class="row-fluid" id="pageTag">
                                    div>

それから急いであなたのプロジェクトを走ってあなたのページの効果を見ました