【JqGrid】JqGrid前端分页+排序+查询条件

╰+攻爆jí腚メ 2022-07-14 06:18 288阅读 0赞

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。

页面代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    		 pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%
    	String path = request.getContextPath();
    %>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>XXX列表</title>
    	<%@ include file="../../../include/top.jsp"%>
    	<script type="text/javascript">
    
    		$(function() {
    			var vars={
    				dateFrom : $.currentMonthFirstDay(),
    				dateTo : $.currentMonthLastDay()
    			};
    			$("input[name='startTime']").val(vars.dateFrom);
    			$("input[name='endTime']").val(vars.dateTo );
    		});
    	</script>
    	<link rel="stylesheet" href="<%=staticPath %>/assets/js/jqgrid/css/ui.jqgrid.css" rel="stylesheet">
    	<script src="<%=staticPath %>/assets/js/jqgrid/js/i18n/grid.locale-cn.js"></script>
    	<script src="<%=staticPath %>/assets/js/jqgrid/js/jquery.jqGrid.min.js"></script>
    </head>
    <body>
    
    <div class="p_container">
    	<form id="groupOrderGuestForm"　method="post">
    		<input type="hidden" name="page" id="page"　value="${pageBean.page }"/>
    		<input type="hidden" name="pageSize" id="pageSize"　value="${pageBean.pageSize }"/>
    		<input type="hidden" name="userRightType" id="userRightType" value="${userRightType}"/>
    		<div class="p_container_sub">
    			<div class="searchRow">
    				<ul>
    					<li class="text"> 日期:</li>
    					<li >
    						<input name="startTime" id="startTime" type="text"  class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
    						~
    						<input name="endTime" id="endTime"  type="text"  class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
    					</li>
    					<li class="text">客人信息:</li>
    					<li >
    						<input type="text" name="receiveMode" id="receiveMode" value=""/>
    					</li>
    
    					<li class="text"> 团号:</li>
    					<li>
    						<input type="text" name="groupCode" id="groupCode" value=""/>
    					</li>
    					<li class="text">平台来源:</li>
    					<li>
    						<input name="supplierName" id="supplierName" type="text"/>
    					</li>
    				</ul>
    				<ul>
    					<li class="text" ">部门:</li>
    					<li>
    						<input type="text" name="orgNames" id="orgNames" stag="orgNames"readonly="readonly" οnclick="showOrg()" style="width: 185px;"/>
    						<input type="hidden" name="orgIds" id="orgIds" stag="orgIds"  />
    					</li>
    
    					<li class="text" ">
    					<select name="operType" id="operType" >
    						<option value="1">客服</option>
    						<option value="2">计调</option>
    						<option value="3">输单员</option>
    					</select>
    					</li>
    					<li>
    						<input type="text" name="saleOperatorName" id="saleOperatorName"  stag="userNames" readonly="readonly"  οnclick="showUser()"/>
    						<input name="saleOperatorIds" id="saleOperatorIds" stag="userIds" type="hidden" />
    					</li>
    					<li class="text"> 产品类型:</li>
    					<li >
    						<input type="text" id="dicNames" readonly="readonly"  οnclick="commonDicDlg()"/>
    						<input type="hidden" name="orderNo" id="dicIds"  />
    					</li>
    					<li class="text"> 产品套餐:</li>
    					<li >
    						<input type="text" name="remark" id="remark" value=""/>
    					</li>
    				</ul>
    				<ul>
    					<li class="text" >姓名:</li>
    					<li >
    						<input type="text" name="guestName" id="guestName" value=""  style="width: 185px;"/>
    					</li>
    					<li class="text">性别:</li>
    					<li class="text" ">
    					<select name="gender" id="gender"  style="width: 80px;">
    						<option value="">全部</option>
    						<option value="1">男</option>
    						<option value="0">女</option>
    					</select>
    					</li>
    					<li class="text" style="width: 140px;"> 年龄:</li>
    					<li >
    						<input type="text" name="ageFirst" id="ageFirst" value="" style="width: 60px;"/>
    						~
    						<input type="text" name="ageSecond" id="ageSecond" value="" style="width: 60px;"/>
    					</li>
    					<li class="text">籍贯:</li>
    					<li >
    						<input type="text" name="nativePlace" id="nativePlace" value=""/>
    					</li>
    
    					<li style="margin-left: 20px;">
    						<button type="button" οnclick="searchBtn()" class="button button-primary button-small">查询</button>
    						<button type="button" οnclick="toPickUpExcel()" class="button button-primary button-small">导出XXX</button>
    						<button type="button" οnclick="toInsuranceExcel()" class="button button-primary button-small">导出YYY </button>
    						<a href="javascript:void(0);" id="toGuestListExcelId" target="_blank" οnclick="toGuestListExcel()" class="button button-primary button-small">导出到Excel</a>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</form>
    
    </div>
    
    
    <div class="p_container" >
    	<div class="jqGrid_guest">
    		
    		<table id="contentGroupOrderTable"></table>
    		
    		<div id="pagerGroupOrder"></div>
    	</div>
    </div>
    
    
    <script src="<%=staticPath %>/assets/js/moment.js"></script>
    <script src="<%=staticPath %>/assets/js/accounting.min.js"></script>
    
    <script type="text/javascript">
    	$(function(){
    
    		opGrid.loadGrid();
    		$("#contentGroupOrderTable").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
    		//opGrid.reSize();
    
    		/* $(window).bind('resize', function () {
    		 opGrid.reSize();
    		 });  */
    
    	});
    	var opGrid = {//组装查询的条件参数
    		/* reSize: function(){
    		 var width = $('.jqGrid_wrapper').width();
    
    		 var height = $(window).height();
    		 var searchBox=80, jqGrid_head = 55, jqGrid_pager = 30, jqGrid_footer = 45;
    		 height = height - searchBox - jqGrid_head - jqGrid_pager - jqGrid_footer;
    		 $('#contentGroupOrderTable').setGridWidth(width);
    		 $('#contentGroupOrderTable').setGridHeight(height - 10);
    		 }, */
    		getParam: function(){
    			var rowListNum = $("#contentGroupOrderTable").jqGrid('getGridParam', 'rowNum');
    			if(rowListNum == undefined){
    				$('#pageSize').val(15);
    			}else{
    				$('#pageSize').val(rowListNum);
    			}
    			//组装查询的条件参数
    			var params = {'startTime':$("#startTime").val()
    				, 'endTime':$("#endTime").val()
    				, 'supplierName':$("#supplierName").val()
    				, 'groupCode':$("#groupCode").val()
    				,'receiveMode':$("#receiveMode").val()
    				,'orgNames':$("#orgNames").val()
    				,'orgIds':$("#orgIds").val()
    				,'saleOperatorName':$("#saleOperatorName").val()
    				,'saleOperatorIds':$("#saleOperatorIds").val()
    
    				,'productName':$("#productName").val()
    				,'remark':$("#remark").val()
    				,'operType':$("#operType").val()
    				,'guestName':$("#guestName").val()
    				,'gender':$("#gender").val()
    				,'ageFirst':$("#ageFirst").val()
    				,'ageSecond':$("#ageSecond").val()
    				,'nativePlace':$("#nativePlace").val()
    				,'pageSize':$("#pageSize").val()
    				,'userRightType':$("#userRightType").val()
    			};
    			return params;
    		},
    		//对金融的处理，除以人数
    		formatPerson:function(v,o,r){
    			return v/(r.num_adult+r.num_child);
    		},
    		/* formatOrderMode:function(v,o,r){
    		 return v;
    		 }, */
    		//对性别的处理
    		formatGender:function(v,o,r){
    			if(v == 0 ){
    				return '女';
    			}else{
    				return '男';
    			}
    		},
    		//table数据
    		loadGrid: function(){
    			$("#contentGroupOrderTable").jqGrid({
    				url: 'groupOrderGuestDataList.do',
    				datatype: "json",
    				mtype : "post",
    				//height: 250,
    				height: "100%",
    				autowidth: false,
    				shrinkToFit: false,
    				rownumbers:true,
    				rowNum: 15,
    				rowList: [15, 30, 50, 100, 500, 1000],
    				//colNames: ['团号', '发团日期', '平台来源', '客人信息', '姓名', '性别',
    				//       '年龄','证件号','电话','籍贯','产品套餐','业务','销售','计调','金额'],
    				colModel: [
    					{label:'团号',name: 'group_code',index: 'groupCode',width: 130, sortable: false, align:'left'},
    					{label:'发团日期',name: 'departure_date',index: 'departure_date',sorttype:'text',align: "center",formatter:function(cellValue,options,rowObject){
    						return (moment(rowObject.departure_date).format("YYYY-MM-DD"));},width: 100, align:'center',formatoptions:''},
    					{label:'平台来源',name: 'supplier_name',index: 'supplier_name',width: 60, sortable: false, align:'left'},
    					{label:'客人信息',name: 'receive_mode',index: 'receive_mode',width: 200, sortable: false, align:'left'},
    					{label:'姓名',name: 'name',index: 'name',width: 80, sortable: false,align:'center'},
    
    					{label:'性别',name: 'gender',index: 'gender',width: 50, sortable: false, align:'center',formatter:opGrid.formatGender},
    					{label:'年龄',name: 'age',index: 'age',width: 50,  align:'center', sorttype:'integer'},
    					{label:'证件号',name: 'certificate_num',index: 'certificate_num',width: 150, sortable: false, align:'center'},
    					{label:'电话',name: 'mobile',index: 'mobile',width: 110, sortable: false, align:'center'},
    					{label:'籍贯',name: 'native_place',index: 'native_place',width: 120, sortable: false, align:'left'},
    
    					{label:'产品套餐',name: 'remark',index: 'remark',width: 300, sortable: false, align:'left'},
    					{label:'业务',name: 'order_mode',index: 'order_mode',width: 70, sortable: false, align:'center',  formatter:'select', formatoptions:{
    						value:{ '1374':'长线',1475:'短线', '1476':'签证', '1486':'门票', '1487':'酒店', '1488':'专线', '1489':'包车', '1490':'组团', '1493':'推广', '1555':'石林九乡'}
    					}
    					},
    					{label:'销售',name: 'sale_operator_name',index: 'sale_operator_name',width: 80, sortable: false, align:'center'},
    					{label:'计调',name: 'operator_name',index: 'operator_name',width: 50, sortable: false, align:'center'},
    					{label:'金额',name: 'total',index: 'total',width: 60, sorttype:'number', align:'center', formatter:opGrid.formatPerson}
    				],
    				//sortable:true,
    				//sortname: 'departure_date',
    				//sortorder: 'asc',
    				loadonce: true,//前端排序的关键属性
    				pager: "#pagerGroupOrder",
    				viewrecords: true,
    				caption: "",
    				jsonReader:{//分页的关键
    					id: "group_id",
    					root: "result",total: "totalPage",page: "pageBean",records: "totalCount",repeatitems: false
    				},
    				postData:opGrid.getParam(),
    				footerrow: true,
    				loadComplete:function(xhr){
    					//查询为空的处理方式
    					var rowNum = $("#contentGroupOrderTable").jqGrid('getGridParam','records');
    					if (rowNum == '0'){
    						if($("#norecords").html() == null)
    							$("#contentGroupOrderTable").parent().append("</pre><div id='norecords' style='text:center;padding: 8px 8px;'>没有查询记录！</div><pre>");
    						$("#norecords").show();
    					}else{
    						$("#norecords").hide();
    					}
    
    				}
    				//,onSortCol: function (index, colindex, sortorder)
    				//{
    
    				/* 列排序事件，向server传值，值为当前的页数，可以传递多个参数。
    				 index, colindex, sortorder三个值可以不设值。 */
    				//jQuery("#contentGroupOrderTable").jqGrid('setGridParam',{page:$('#page').val()});
    
    				//}
    			});
    		}
    	}
    
    	function searchBtn() {
    		//前端分页先将datatype会变成local,所以必须先将其变为Json，点击查询按钮时才不会触发两次，就可以一次性加载数据了
    		$("#contentGroupOrderTable").setGridParam({datatype:'json', page:1}).jqGrid('setGridParam', {page:1, postData: opGrid.getParam()}).trigger("reloadGrid");
    	}
    </script>
    </body>
    <script type="text/javascript">
    	/* 导出XXX */
    	function toPickUpExcel(){
    		var curpagenum = $('#contentGroupOrderTable').getGridParam('page');
    		$("#page").val(curpagenum);
    		var startTime=$('#startTime').val();
    		var endTime=$('#endTime').val();
    		var receiveMode=$('#receiveMode').val();
    		var groupCode=$('#groupCode').val();
    		var supplierName=$('#supplierName').val();
    
    		var orgIds=$('#orgIds').val();
    		var orgNames=$('#orgNames').val();
    		var operType=$('#operType').val();
    		var saleOperatorIds=$('#saleOperatorIds').val();
    		var saleOperatorName=$('#saleOperatorName').val();
    
    		var orderMode=$('#dicIds').val();
    		var remark=$('#remark').val();
    		var page=$('#page').val();
    		var pageSize=$('#pageSize').val();
    		var userRightType=$('#userRightType').val();
    
    		var guestName=$('#guestName').val();
    		var gender=$('#gender').val()
    		var ageFirst=$('#ageFirst').val()
    		var ageSecond=$('#ageSecond').val()
    		var nativePlace=$('#nativePlace').val()
    
    		window.location ='../taobao/toGroupOrderGuesExport.do?startTime='+startTime
    				+"&endTime="+endTime
    				+"&receiveMode="+receiveMode
    				+"&groupCode="+groupCode
    				+"&supplierName="+supplierName
    				+"&orgIds="+orgIds
    				+"&orgNames="+orgNames
    				+"&operType="+operType
    				+"&saleOperatorIds="+saleOperatorIds
    				+"&saleOperatorName="+saleOperatorName
    				+"&orderMode="+orderMode
    				+"&remark="+remark
    				+"&page="+page
    				+"&pageSize="+pageSize
    				+"&userRightType="+userRightType
    				+"&guestName="+guestName
    				+"&gender="+gender
    				+"&ageFirst="+ageFirst
    				+"&ageSecond="+ageSecond
    				+"&nativePlace="+nativePlace;
    	}
    	/* 导出YYY */
    	function toInsuranceExcel(){
    		var curpagenum = $('#contentGroupOrderTable').getGridParam('page');
    		$("#page").val(curpagenum);
    		var startTime=$('#startTime').val();
    		var endTime=$('#endTime').val();
    		var receiveMode=$('#receiveMode').val();
    		var groupCode=$('#groupCode').val();
    		var supplierName=$('#supplierName').val();
    
    		var orgIds=$('#orgIds').val();
    		var orgNames=$('#orgNames').val();
    		var operType=$('#operType').val();
    		var saleOperatorIds=$('#saleOperatorIds').val();
    		var saleOperatorName=$('#saleOperatorName').val();
    
    		var orderMode=$('#dicIds').val();
    		var remark=$('#remark').val();
    		var page=$('#page').val();
    		var pageSize=$('#pageSize').val();
    		var userRightType=$('#userRightType').val();
    
    		var guestName=$('#guestName').val();
    		var gender=$('#gender').val()
    		var ageFirst=$('#ageFirst').val()
    		var ageSecond=$('#ageSecond').val()
    		var nativePlace=$('#nativePlace').val()
    
    		window.location ='../taobao/downloadInsure.htm?startTime='+startTime
    				+"&endTime="+endTime
    				+"&receiveMode="+receiveMode
    				+"&groupCode="+groupCode
    				+"&supplierName="+supplierName
    				+"&orgIds="+orgIds
    				+"&orgNames="+orgNames
    				+"&operType="+operType
    				+"&saleOperatorIds="+saleOperatorIds
    				+"&saleOperatorName="+saleOperatorName
    				+"&orderMode="+orderMode
    				+"&remark="+remark
    				+"&page="+page
    				+"&pageSize="+pageSize
    				+"&userRightType="+userRightType
    				+"&guestName="+guestName
    				+"&gender="+gender
    				+"&ageFirst="+ageFirst
    				+"&ageSecond="+ageSecond
    				+"&nativePlace="+nativePlace;
    	}
    
    
    	/* 导出到Excel */
    	function toGuestListExcel(){
    		var curpagenum = $('#contentGroupOrderTable').getGridParam('page');
    		$("#page").val(curpagenum);
    		$("#toGuestListExcelId").attr("href","toSaleGuestListExcel.do?startTime="+$("#startTime").val()
    				+"&endTime="+$("#endTime").val()
    				+"&receiveMode="+$("#receiveMode").val()
    				+"&groupCode="+$("#groupCode").val()
    				+"&orgIds="+$("#supplierName").val()
    				+"&orgIds="+$("#orgIds").val()
    				+"&orgNames="+$("#orgNames").val()
    				+"&operType="+$("#operType").val()
    				+"&saleOperatorIds="+$("#saleOperatorIds").val()
    				+"&saleOperatorName="+$("#saleOperatorName").val()
    				+"&orderMode="+$("#dicIds").val()
    				+"&remark="+$("#remark").val()
    				+"&page="+$("#page").val()
    				+"&pageSize="+$("#pageSize").val()
    				+"&userRightType="+$("#userRightType").val()
    				+"&guestName="+$("#guestName").val()
    				+"&gender="+$("#gender").val()
    				+"&ageFirst="+$("#ageFirst").val()
    				+"&ageSecond="+$("#ageSecond").val()
    				+"&nativePlace="+$("#nativePlace").val());
    	}
    
    	function commonDicDlg() {
    		$.dicItemDlg('SALES_TEAM_TYPE','dicNames','dicIds');
    	}
    </script>
    <%@ include file="/WEB-INF/views/component/org-user/org_user_multi.jsp"%>
    </html>

前提条件是controller得返回数据，且是一次性加载数据，我这里返回一个JSON的字符串，只需添加熟悉

loadonce: true,

以及

sorttype:'number',

这样的话会影响查询条件，对于查询条件的处理，请查阅我的这篇文章：[http://blog.csdn.net/zsq520520/article/details/53401328][http_blog.csdn.net_zsq520520_article_details_53401328]

[http_blog.csdn.net_zsq520520_article_details_53401328]: http://blog.csdn.net/zsq520520/article/details/53401328