mybatis ajaxページングに基づく実装
27326 ワード
ブロガーここのajaxページングは、前のカスタムラベルに基づくページングです.その根本的な違いはajaxページングがカスタムラベルの内容をajax方式で実現したことです.だから、このajaxページングもバックグラウンドデータベースページングに属しています.はい、コードを見てください.
1、約束したように、ここでは前の文章のすべてのサービス層とdao層のコードに基づいて、pageを含む.JAvaベースクラスとmybatisのブロッキング実装は、いずれも前の記事と同じで、以上を明らかにしてajaxページングを実現し始めました
1、ajaxでアクセスする以上、control層は普通の方法とは違うに違いない
2、以上のコードを通じて、返す結果が違うようですね.はい、ブロガーはModelAndViewクラスを真似て、新しいクラスAjaxPageResponseを作りました.
3、基礎類AjaxPageResultMap及びAjaxPageModel
AjaxPageResultMapクラス
AjaxPageModelクラス
4、そしてもちろん前のブログのカスタムタグ実装の内容をajax実装に変更します
ajaxPageUtil.js実装原理は、元のajax関数にページングの属性値を抽出し、ページングのページスタイルを表示するためのレイヤを追加することである.
$("#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ファイルを導入します.
そして、バックグラウンドコントロールを呼び出す方法を書きます.ここで$.ajaxPageの呼び出し方法と$.ajaxはそっくりで、その後、successメソッドのdataパラメータの使用はcontrol最後のmodelの使用方法と同じで、直接data.secbranchこれにより、controlに格納された値を取り出すことができます
それから、ページングボタンが表示されているところに次のdivを入れなければなりません.
それから急いであなたのプロジェクトを走ってあなたのページの効果を見ました
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>
それから急いであなたのプロジェクトを走ってあなたのページの効果を見ました