EasyUI的datagrid组件结合jsonp实现分页显示跨域数据

前台页面

	Untitled Page

$(document).ready(function(){ $("#dg").datagrid({ loader:function(param,success,error){ var rows = 30; var beginIndex = 0; $.ajax({ type: "get", async: false, url: "http://127.0.0.1:8080/work/sod?parameter={beginIndex:" + beginIndex + ",rows:" + rows + "}", dataType: "jsonp", jsonp: "callback", jsonpCallback:"callback", success: function(data){ success(data); }, error: function(xhr){ error(xhr.responseText); } }); }, pagination:true, fit:true, fitColumns:true, title:"房间列表", columns:[[ {field:'roomID',title:'roomID',width:100}, {field:'roomName',title:'roomName',width:100}, {field:'onlineCount',title:'onlineCount',width:100} , {field:'userID',title:'userID',userID:100} ]] }) //var opts = $('#dg').datagrid('options'); var pager = $('#dg').datagrid('getPager'); $(pager).pagination({ pageSize: 30, pageList: [10,20,30], onSelectPage:function(pageNumber, pageSize){ var rows = pageSize; var beginIndex = (pageNumber-1)*rows; $.ajax({ type: "get", async: false, url: "http://127.0.0.1:8080/work/sod?parameter={beginIndex:" + beginIndex + ",rows:" + rows + "}", dataType: "jsonp", jsonp: "callback", jsonpCallback:"callback", success: function(data){ $('#dg').datagrid('loadData',data); }, error: function(xhr){ error(xhr.responseText); } }); } }); });

后台代码

package com.work.sample.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import net.sf.json.JSONObject;

@Controller
public class SampleController {
	
	private static List rooms;
	
	static{
		rooms = new ArrayList();
		for(int i=1;i<=35;i++){
			rooms.add(new Room(i,"房间"+i,i,(long)i));
		}
	}

    @RequestMapping("/sod")
    @ResponseBody
    public void findByPage(HttpServletRequest request,HttpServletResponse response) throws IOException {
    	String parameter = request.getParameter("parameter");
    	JSONObject jsonObj = JSONObject.fromObject(parameter);
    	Integer beginIndex = (Integer) jsonObj.get("beginIndex");
    	Integer rows = (Integer) jsonObj.get("rows");
        Map result = new HashMap();
        result.put("total", rooms.size());
        Integer s = beginIndex;
        Integer e = beginIndex + rows;
        if(e > rooms.size()){
        	e = rooms.size();
        }
        result.put("rows", rooms.subList(s, e));
        response.setContentType("text/html"); 
        response.setCharacterEncoding("UTF-8");
        String jsonStr = "callback(" + JSONObject.fromObject(result).toString() + ")";
        response.getWriter().print(jsonStr);
    }
}

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30980622/viewspace-2051035/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/30980622/viewspace-2051035/