jqGrid动态请求json分页数据(服务器端Java实现)

Javascript框架 05/05 阅读 610 views次 人气 0
摘要:

jqGrid通过URL动态发起JTTP请求,将返回分页所需要的json数据。

页面:

<table id="grid-table"></table>
<div id="grid-pager"></div>

JS

$(document).ready(function() {
	$('#grid-table').jqGrid({
		datatype: "json", 
		url: path + '/demo.action', 
		height: 351,
		colNames:['ID','名称','邮箱', '操作'],
		colModel:[
			{name:'id',index:'id', width:'20', editable: false},
			{name:'name',index:'name', width:'20'},
			{name:'email',index:'email', width:'20'},
			{name:'opt',index:'id', width:'30',fixed:false, sortable:false, resize:false,
				align:'center',formatter:optFormatter
			},
		], 
		viewrecords : true,
		rowNum:10,
		rowList:[10,20,30],
		pager : '#grid-pager',
		altRows: true,
		//toppager: true,
		multiselect: true,
		//multikey: "ctrlKey",
        multiboxonly: true,
		loadComplete : function() {
			var table = this;
			setTimeout(function(){
				completeStyle(table);
				updateActionIcons(table);
				updatePagerIcons(table);
				enableTooltips(table);
			}, 0);
		},

		caption: "",
		autowidth: true

	});

	function optFormatter(cellvalue, options, rowObject){
		
		return "<a onclick=\"saveData('1212');\" class='label label-sm label-info arrowed arrowed-righ' style='color:#fff;'>编辑</a>";
	}
	
	// 加载完成后 更改样式
	function completeStyle(table) {
		// 更改checkbox样式
		$(table).find('input:checkbox').addClass('ace')
		.wrap('<label />')
		.after('<span class="lbl align-top" />');
		$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
		.find('input.cbox[type=checkbox]').addClass('ace')
		.wrap('<label />').after('<span class="lbl align-top" />');
	}
	
	function updateActionIcons(table) {
		var replacement = 
		{
			'ui-icon-pencil' : 'icon-pencil blue',
			'ui-icon-trash' : 'icon-trash red',
			'ui-icon-disk' : 'icon-ok green',
			'ui-icon-cancel' : 'icon-remove red'
		};
		$(table).find('.ui-pg-div span.ui-icon').each(function(){
			var icon = $(this);
			var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
			if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
		})
	}
	
	function updatePagerIcons(table) {
		var replacement = 
		{
			'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
			'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
			'ui-icon-seek-next' : 'icon-angle-right bigger-140',
			'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
		};
		$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
			var icon = $(this);
			var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
			if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
		})
	}
	
	// 
	function enableTooltips(table) {
		$('.navtable .ui-pg-button').tooltip({container:'body'});
		$(table).find('.ui-pg-div').tooltip({container:'body'});
	}
});

Java服务器端:

package com.what21.srp.server.action.demo;

import java.io.IOException;
import java.util.Map;
import java.util.Set;

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

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.what21.srp.server.action.base.BaseAction;

public class DemoAction extends BaseAction {

	@Override
	public void execute(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("---------------------------------------------");
		// 接收参数
		Map<String,String[]> map = request.getParameterMap();
		Set<String> keySet = map.keySet();
		for(String key : keySet){
			String[] values = map.get(key);
			String value = "";
			for(int i=0;i<values.length;i++){
				value = value + values[i];
				if(i!=values.length-1){
					value = value + ",";
				}
			}
			System.out.println(key + " = " + value);
		}
		System.out.println("---------------------------------------------");
		
		// 1、当前第几页
		String pageStr = request.getParameter("page");
		// 2、每页多少行
		String rowsStr = request.getParameter("rows");
		if(pageStr==null){
			pageStr = "1";
		}
		if(rowsStr==null){
			rowsStr = "10";
		}
		// 3、返回的总记录数
		int count=111;
		
		
		// 当前页
		int page = Integer.parseInt(pageStr);
		// 页大小
		int rows = Integer.parseInt(rowsStr);
		System.out.println("当请求前页(page) = " + page);
		System.out.println("请求页大小(rows) = " + rows);
		// 记录总数
		int records = count;
		System.out.println("响应记录总数(records) = " + records);
		// 总页数
		int total = (records%rows==0) ? records/rows : records/rows+1;
		System.out.println("响应页总数(total) = " + total);
		
		// 返回内容
		int start = (page-1)*rows+1;
		int end = start + rows;
		JSONObject jsonData = new JSONObject();
		try {
			jsonData.put("total", total);
			jsonData.put("page", page);
			jsonData.put("records", records);
			JSONArray jsonArray = new JSONArray();
			for(int i=start;i<=end && i<=count;i++){
				JSONObject data = new JSONObject();
				data.put("id", "id" + i);
				data.put("name", "name" + i);
				data.put("email", "email" + i);
				jsonArray.put(data);
			}
			System.out.println("响应展示数据(rows) = " + jsonArray.toString());
			jsonData.put("rows", jsonArray);
		} catch (JSONException e) {
			e.printStackTrace();
		}
		
		// HTTP返回的实际JSON数据
		String json = jsonData.toString();
		System.out.println("响应JSON数据 = " + json);
		response.setContentType("application/json; charset=utf-8");  
		response.getWriter().write(json);
		System.out.println("---------------------------------------------");
	}
	
}

数据格式输出:

---------------------------------------------
sord = asc
page = 1
nd = 1493917392581
sidx = 
_search = false
rows = 10
---------------------------------------------
当请求前页(page) = 1
请求页大小(rows) = 10
响应记录总数(records) = 111
响应页总数(total) = 12
响应展示数据(rows) = [{"id":"id1","email":"email1","name":"name1"},{"id":"id2","email":"email2","name":"name2"},{"id":"id3","email":"email3","name":"name3"},{"id":"id4","email":"email4","name":"name4"},{"id":"id5","email":"email5","name":"name5"},{"id":"id6","email":"email6","name":"name6"},{"id":"id7","email":"email7","name":"name7"},{"id":"id8","email":"email8","name":"name8"},{"id":"id9","email":"email9","name":"name9"},{"id":"id10","email":"email10","name":"name10"},{"id":"id11","email":"email11","name":"name11"}]
响应JSON数据 = {"total":12,"page":1,"records":111,"rows":[{"id":"id1","email":"email1","name":"name1"},{"id":"id2","email":"email2","name":"name2"},{"id":"id3","email":"email3","name":"name3"},{"id":"id4","email":"email4","name":"name4"},{"id":"id5","email":"email5","name":"name5"},{"id":"id6","email":"email6","name":"name6"},{"id":"id7","email":"email7","name":"name7"},{"id":"id8","email":"email8","name":"name8"},{"id":"id9","email":"email9","name":"name9"},{"id":"id10","email":"email10","name":"name10"},{"id":"id11","email":"email11","name":"name11"}]}
---------------------------------------------


评论

该文章不支持评论!

分享到: