使用jqGrid形成表格

1、Mapper.xml文件中的排序（sqlServer数据库）

 ......
 order by xx ,yy offset #{page}*#{rows} - #{rows} row fetch next #{pageSize} row only

2、业务层省略，控制器返回的是json数据

@RequestMapping("/List.do")
@ResponseBody
	public JSONObject showJson（@RequestParam("page")Integer page,@RequestParam("rows")Integer rows）{
		Map<String, Object> map = new HashMap<String, Object>();
		//得到的页数
		Integer totalpages = total % rows == 0 ? total/rows:total/rows+1;	
		map.put("totalpages", totalpages);//总页数
		map.put("pageSize", rows);//每页多少数据
		map.put("rows", listFinishOnTime);	//得到的集合
		map.put("page", page);//当前页
		map.put("total", total);//总共多少条数据
		JSONObject json = JSONObject.fromObject( map ); 
		//System.out.println(json.toString())	
		return json;
}

3、jsp页面，css，js请自己官网下载

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jqgrid/ui.jqgrid.css" >
<%-- <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jqgrid/ui.jqgrid-bootstrap-ui.css" > --%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jqgrid/ui-lightness/jquery-ui-1.7.2.custom.css" >	
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jqgrid/ui-lightness/jquery-ui.css" >
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script  src="${pageContext.request.contextPath}/js/jqgrid/grid.locale-cn.js"></script>
<script  src="${pageContext.request.contextPath}/js/jqgrid/jquery.jqGrid.min.js"></script>
<script  src="${pageContext.request.contextPath}/js/jqgrid/jquery-ui.js"></script>
<!--这里是查询条件form表单 和jquery（）查询按钮  -->
<!-- JqGrid  -->
<div class="p_container" >
	<div class="jqGrid_guest">
		<table id="list4"></table>
		<div id="pager2"></div>
	</div>
</div>

<script type="text/javascript">
//设置初始时间
var date = new Date();
var seperator = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
  month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
  strDate = "0" + strDate;
}
var currentDate = year-1 + seperator + month + seperator + strDate; //开始日期
$("#prdtdate").attr('value',currentDate);

var sbumitTime = year + seperator + month + seperator + strDate; //当前日期
$("#deldate").attr('value',sbumitTime);

$(function(){
	selects(); //和表格无关
	select();  //和表格无关			
	opGrid.loadGrid();
	$("#list4").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');

});
var opGrid = {//组装查询的条件参数
		getParam: function(){
			var rowListNum = $("#list4").jqGrid('getGridParam', 'rowNum');
			if(rowListNum == undefined){
				$('#pageSize').val(10);
			}else{
				$('#pageSize').val(rowListNum);
			}
			//组装查询的条件参数
			var params = {
					'prdtdate':$("#prdtdate").val(),
					'deldate':$("#deldate").val(),
					'companyid':$("#companyid").val(),
					'refdoctype':$("#refdoctype").val(),
					'ordertype':$("#orderType").val(),
					'cv2':$("#cv2").val(),
					'hourA':$("#hourA").val(),
					'hourB':$("#hourB").val(),
					'pageSize':$("#pageSize").val()				
			};
			return params;
		},
loadGrid: function(){
			$("#list4").jqGrid({
		url:'${pageContext.request.contextPath}/xx/List.do', 
		datatype: "json",
		mtype : "get",
		height: 400,
		rowNum:10,
	   	rowList:[10,20,30,50,100],
	   	pager: '#pager2',		 // 分页控件的id
	    viewrecords: true,		//设置是否在Pager Bar显示所有记录的总数。
	   // loadonce: true,//前端排序的关键属性
	    sortable:true,
	    sortorder: "desc",	    
	    rownumbers: true,            // 如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'
	    autowidth: true,         // 如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。
	    							//如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth
	   	colNames:['xx','xx', 'xx', 'xx','xx','xx','xx','xx', 'yy','yy','zz','zz','zz'],
	   	colModel:[//关键，name和后台json传过来的集合中的数据一样
	   		{name:'id',index:'id', width:60,align:"center"},
	   		{name:'mc',index:'mc', width:60,align:"center"},
	   		{name:'in',index:'in', width:60,align:"center"},
	   		{name:'out',index:'out', width:60, align:"center"},
	   		{name:'tot',index:'tot', width:80, align:"center"},		
	   		{name:'outFit',index:'outFt', width:60,align:"center"},		
	   		{name:'finnt',index:'finit', width:80,align:"center"}	,
	   		{name:'ontit',index:'onnnet', width:60,align:"center"},
	   		{name:'ontit',index:'onut', width:60, align:"center"},
	   		{name:'onish',index:'onsh', width:80, align:"center"},	
	   		{name:'ounet',index:'ounet', width:60, align:"center"},
	   		{name:'outout',index:'ouut', width:60, align:"center"},
	   		{name:'outt',index:'outtnt', width:80, align:"center"},	
	   	],
	   	multiselect: true,
	   //caption: "Manipulating Array Data",
	   	jsonReader:{//分页的关键			
			root: "rows",//记录列表
			page: "page", //当前页码
			total: "totalpages", //总页数
			records: "total",//总记录数	
			repeatitems: false
		},	 
		postData:opGrid.getParam(),
		//	footerrow: true			表尾
		
		
	});
		$("#list4").setGroupHeaders({ 
			useColSpanStyle: true,    //表头是否合并行，曾试了好多次，引入的js老是报错，建议先清除缓存
			groupHeaders:[ 
				{startColumnName: 'in', numberOfColumns: 3, titleText: '套数'},
				{startColumnName: 'finnt', numberOfColumns: 2, titleText: '完成'},
				{startColumnName: 'onish', numberOfColumns: 3, titleText: '准时'}			
			] 
		});    
	    
}
}

function query(){
        var prdtdate = ($("#prdtdate").val()); 
        var deldate = ($("#deldate").val()); 
        var companyid = $("#companyid").val(); 
        var refdoctype = $("#refdoctype").val(); 
        var ordertype = $("#ordertype").val(); 
        var cv2 = ($("#cv2").val()); 
        var hourB = ($("#hourB").val()); 
        var hourA = escape($("#hourA").val()); 
      //  $("#list4").setGridParam({datatype:'json', page:1}).jqGrid('setGridParam', {page:1, postData: opGrid.getParam()}).trigger("reloadGrid");
    //重新载入 
        $("#list4").jqGrid('setGridParam', {page:1, postData: opGrid.getParam()}).trigger("reloadGrid");
	}
 
</script>

function selects() {
var dictid = "-5500104";
	$.ajax({
				url : "${pageContext.request.contextPath}/util/dropdownlist/List.do",
				method : "get",
				data : {
					"dictid" : dictid
				},
				dataType : "json",
				"success" : function(obj) {
					for (var i = 0; i < obj.data.length; i++) {
						var selects = '<option value="'+obj.data[i].interValue+'">'
								+ obj.data[i].dictvalue + '</option>'
						$("#orderType").append(selects);
					}
				}
			});
}

function select() {
	var dictid2 = "-5500501";
	$.ajax({
		url : "${pageContext.request.contextPath}/util/dropdownlist/List.do",
		method : "get",
		data : {
			"dictid" : dictid2
		},
		dataType : "json",
		"success" : function(obj) {
			
			var empty = '<option value=>全部</option>'
				$("#cv2").append(empty);	 		
			for (var i = 0; i < obj.data.length; i++) {
				var selects = '<option value="'+obj.data[i].interValue+'">'
						+ obj.data[i].dictvalue + '</option>'
				$("#cv2").append(selects);
						
				}
			}
		});
	}
	
function shutDown() { //关闭
	window.parent.tabsClose();
	}