【JqGrid】JqGrid使用後臺分頁+查詢條件+排序
阿新 • • 發佈：2019-01-03
最近做專案時要用到jqGrid,先學習了一下jqGrid的使用方法，現總結如下，先從基本的說起：
1、資料顯示：
1、資料顯示：
jqGrid可以解析的資料有很多種，如xml、json等，在這個專案中主要用的就是json資料解析，JqGrid查詢時和後臺互動是很簡單的，但是必須注意幾個地方，廢話少說，我直接上程式碼：
JSP程式碼如下：
特別說明：<%@ 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>團客人名單列表</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" onclick="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" onclick="showUser()"/> <input name="saleOperatorIds" id="saleOperatorIds" stag="userIds" type="hidden" /> </li> <li class="text"> 產品型別:</li> <li > <input type="text" id="dicNames" readonly="readonly" onclick="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" onclick="searchBtn()" class="button button-primary button-small">查詢</button> <button type="button" onclick="toPickUpExcel()" class="button button-primary button-small">匯出地接單</button> <button type="button" onclick="toInsuranceExcel()" class="button button-primary button-small">匯出保險單 </button> <a href="javascript:void(0);" id="toGuestListExcelId" target="_blank" onclick="toGuestListExcel()" class="button button-primary button-small">匯出到Excel</a> </li> </ul> </div> </div> </form> </div> <!-- 以上是查詢的條件 --> <!-- JqGrid --> <div class="p_container" > <div class="jqGrid_guest"> <!-- JqGrid Table--> <table id="contentGroupOrderTable"></table> <!-- JqGrid page--> <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',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'}, {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, align:'center', formatter:opGrid.formatPerson} ], //sortable:true, //sortname: 'departure_date', //sortorder: 'asc', 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> <%@ include file="/WEB-INF/views/component/org-user/org_user_multi.jsp"%> </html>
（1）、不需要新增loadonce: true和sorttype:'text'這兩個屬性。
（2）、按鈕查詢不需要這樣寫：
只需要這樣寫就行：function searchBtn() { //前端分頁先將datatype會變成local,所以必須先將其變為Json，點選查詢按鈕時才不會觸發兩次，就可以一次性載入資料了 $("#contentGroupOrderTable").setGridParam({datatype:'json', page:1}).jqGrid('setGridParam', {page:1, postData: opGrid.getParam()}).trigger("reloadGrid"); }
function searchBtn() {
$("#contentGroupOrderTable").jqGrid('setGridParam', {page:1, postData: opGrid.getParam()}).trigger("reloadGrid");
} String sidx = request.getParameter("sidx");//來獲得排序的列名，
String sord = request.getParameter("sord");//來獲得排序方式3、需要將loadGrid中新增屬性rowNum: 15，在controller控制層方法中帶上引數Integer rows，將這個引數傳入PageSize，即：<if test="sidx != null and sidx != ''"> order by ${sidx} ${sord} </if>
pageBean.setPageSize(rows);