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

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

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

页面代码如下：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.          pageEncoding="UTF-8"%>
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  4. <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <%
  7.     String path = request.getContextPath();
  8. %>
  9. <html>
  10. <head>
  11.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12.     <title>XXX列表</title>
  13.     <%@ include file="../../../include/top.jsp"%>
  14.     <script type="text/javascript">
  16.         $(function() {
  17.             var vars={
  18.                 dateFrom : $.currentMonthFirstDay(),
  19.                 dateTo : $.currentMonthLastDay()
  20.             };
  21.             $("input[name='startTime']").val(vars.dateFrom);
  22.             $("input[name='endTime']").val(vars.dateTo );
  23.         });
  24.     </script>
  25.     <link rel="stylesheet" href="<%=staticPath %>/assets/js/jqgrid/css/ui.jqgrid.css" rel="stylesheet">
  26.     <script src="<%=staticPath %>/assets/js/jqgrid/js/i18n/grid.locale-cn.js"></script>
  27.     <script src="<%=staticPath %>/assets/js/jqgrid/js/jquery.jqGrid.min.js"></script>
  28. </head>
  29. <body>
  31. <div class="p_container">
  32.     <form id="groupOrderGuestForm"　method="post">
  33.         <input type="hidden" name="page" id="page"　value="${pageBean.page }"/>
  34.         <input type="hidden" name="pageSize" id="pageSize"　value="${pageBean.pageSize }"/>
  35.         <input type="hidden" name="userRightType" id="userRightType" value="${userRightType}"/>
  36.         <div class="p_container_sub">
  37.             <div class="searchRow">
  38.                 <ul>
  39.                     <li class="text"> 日期:</li>
  40.                     <li >
  41.                         <input name="startTime" id="startTime" type="text"  class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
  42.                         ~
  43.                         <input name="endTime" id="endTime"  type="text"  class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
  44.                     </li>
  45.                     <li class="text">客人信息:</li>
  46.                     <li >
  47.                         <input type="text" name="receiveMode" id="receiveMode" value=""/>
  48.                     </li>
  50.                     <li class="text"> 团号:</li>
  51.                     <li>
  52.                         <input type="text" name="groupCode" id="groupCode" value=""/>
  53.                     </li>
  54.                     <li class="text">平台来源:</li>
  55.                     <li>
  56.                         <input name="supplierName" id="supplierName" type="text"/>
  57.                     </li>
  58.                 </ul>
  59.                 <ul>
  60.                     <li class="text" ">部门:</li>
  61.                     <li>
  62.                         <input type="text" name="orgNames" id="orgNames" stag="orgNames"readonly="readonly" οnclick="showOrg()" style="width: 185px;"/>
  63.                         <input type="hidden" name="orgIds" id="orgIds" stag="orgIds"  />
  64.                     </li>
  66.                     <li class="text" ">
  67.                     <select name="operType" id="operType" >
  68.                         <option value="1">客服</option>
  69.                         <option value="2">计调</option>
  70.                         <option value="3">输单员</option>
  71.                     </select>
  72.                     </li>
  73.                     <li>
  74.                         <input type="text" name="saleOperatorName" id="saleOperatorName"  stag="userNames" readonly="readonly"  οnclick="showUser()"/>
  75.                         <input name="saleOperatorIds" id="saleOperatorIds" stag="userIds" type="hidden" />
  76.                     </li>
  77.                     <li class="text"> 产品类型:</li>
  78.                     <li >
  79.                         <input type="text" id="dicNames" readonly="readonly"  οnclick="commonDicDlg()"/>
  80.                         <input type="hidden" name="orderNo" id="dicIds"  />
  81.                     </li>
  82.                     <li class="text"> 产品套餐:</li>
  83.                     <li >
  84.                         <input type="text" name="remark" id="remark" value=""/>
  85.                     </li>
  86.                 </ul>
  87.                 <ul>
  88.                     <li class="text" >姓名:</li>
  89.                     <li >
  90.                         <input type="text" name="guestName" id="guestName" value=""  style="width: 185px;"/>
  91.                     </li>
  92.                     <li class="text">性别:</li>
  93.                     <li class="text" ">
  94.                     <select name="gender" id="gender"  style="width: 80px;">
  95.                         <option value="">全部</option>
  96.                         <option value="1">男</option>
  97.                         <option value="0">女</option>
  98.                     </select>
  99.                     </li>
  100.                     <li class="text" style="width: 140px;"> 年龄:</li>
  101.                     <li >
  102.                         <input type="text" name="ageFirst" id="ageFirst" value="" style="width: 60px;"/>
  103.                         ~
  104.                         <input type="text" name="ageSecond" id="ageSecond" value="" style="width: 60px;"/>
  105.                     </li>
  106.                     <li class="text">籍贯:</li>
  107.                     <li >
  108.                         <input type="text" name="nativePlace" id="nativePlace" value=""/>
  109.                     </li>
  111.                     <li style="margin-left: 20px;">
  112.                         <button type="button" οnclick="searchBtn()" class="button button-primary button-small">查询</button>
  113.                         <button type="button" οnclick="toPickUpExcel()" class="button button-primary button-small">导出XXX</button>
  114.                         <button type="button" οnclick="toInsuranceExcel()" class="button button-primary button-small">导出YYY </button>
  115.                         <a href="javascript:void(0);" id="toGuestListExcelId" target="_blank" οnclick="toGuestListExcel()" class="button button-primary button-small">导出到Excel</a>
  116.                     </li>
  117.                 </ul>
  118.             </div>
  119.         </div>
  120.     </form>
  122. </div>
  123. <!-- 以上是查询的条件  -->
  124. <!-- JqGrid  -->
  125. <div class="p_container" >
  126.     <div class="jqGrid_guest">
  127.         <!-- JqGrid  Table-->
  128.         <table id="contentGroupOrderTable"></table>
  129.         <!-- JqGrid  page-->
  130.         <div id="pagerGroupOrder"></div>
  131.     </div>
  132. </div>
  135. <script src="<%=staticPath %>/assets/js/moment.js"></script>
  136. <script src="<%=staticPath %>/assets/js/accounting.min.js"></script>
  138. <script type="text/javascript">
  139.     $(function(){
  141.         opGrid.loadGrid();
  142.         $("#contentGroupOrderTable").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
  143.         //opGrid.reSize();
  145.         /* $(window).bind('resize', function () {
  146.          opGrid.reSize();
  147.          });  */
  149.     });
  150.     var opGrid = {//组装查询的条件参数
  151.         /* reSize: function(){
  152.          var width = $('.jqGrid_wrapper').width();
  154.          var height = $(window).height();
  155.          var searchBox=80, jqGrid_head = 55, jqGrid_pager = 30, jqGrid_footer = 45;
  156.          height = height - searchBox - jqGrid_head - jqGrid_pager - jqGrid_footer;
  157.          $('#contentGroupOrderTable').setGridWidth(width);
  158.          $('#contentGroupOrderTable').setGridHeight(height - 10);
  159.          }, */
  160.         getParam: function(){
  161.             var rowListNum = $("#contentGroupOrderTable").jqGrid('getGridParam', 'rowNum');
  162.             if(rowListNum == undefined){
  163.                 $('#pageSize').val(15);
  164.             }else{
  165.                 $('#pageSize').val(rowListNum);
  166.             }
  167.             //组装查询的条件参数
  168.             var params = {'startTime':$("#startTime").val()
  169.                 , 'endTime':$("#endTime").val()
  170.                 , 'supplierName':$("#supplierName").val()
  171.                 , 'groupCode':$("#groupCode").val()
  172.                 ,'receiveMode':$("#receiveMode").val()
  173.                 ,'orgNames':$("#orgNames").val()
  174.                 ,'orgIds':$("#orgIds").val()
  175.                 ,'saleOperatorName':$("#saleOperatorName").val()
  176.                 ,'saleOperatorIds':$("#saleOperatorIds").val()
  178.                 ,'productName':$("#productName").val()
  179.                 ,'remark':$("#remark").val()
  180.                 ,'operType':$("#operType").val()
  181.                 ,'guestName':$("#guestName").val()
  182.                 ,'gender':$("#gender").val()
  183.                 ,'ageFirst':$("#ageFirst").val()
  184.                 ,'ageSecond':$("#ageSecond").val()
  185.                 ,'nativePlace':$("#nativePlace").val()
  186.                 ,'pageSize':$("#pageSize").val()
  187.                 ,'userRightType':$("#userRightType").val()
  188.             };
  189.             return params;
  190.         },
  191.         //对金融的处理，除以人数
  192.         formatPerson:function(v,o,r){
  193.             return v/(r.num_adult+r.num_child);
  194.         },
  195.         /* formatOrderMode:function(v,o,r){
  196.          return v;
  197.          }, */
  198.         //对性别的处理
  199.         formatGender:function(v,o,r){
  200.             if(v == 0 ){
  201.                 return '女';
  202.             }else{
  203.                 return '男';
  204.             }
  205.         },
  206.         //table数据
  207.         loadGrid: function(){
  208.             $("#contentGroupOrderTable").jqGrid({
  209.                 url: 'groupOrderGuestDataList.do',
  210.                 datatype: "json",
  211.                 mtype : "post",
  212.                 //height: 250,
  213.                 height: "100%",
  214.                 autowidth: false,
  215.                 shrinkToFit: false,
  216.                 rownumbers:true,
  217.                 rowNum: 15,
  218.                 rowList: [15, 30, 50, 100, 500, 1000],
  219.                 //colNames: ['团号', '发团日期', '平台来源', '客人信息', '姓名', '性别',
  220.                 //       '年龄','证件号','电话','籍贯','产品套餐','业务','销售','计调','金额'],
  221.                 colModel: [
  222.                     {label:'团号',name: 'group_code',index: 'groupCode',width: 130, sortable: false, align:'left'},
  223.                     {label:'发团日期',name: 'departure_date',index: 'departure_date',sorttype:'text',align: "center",formatter:function(cellValue,options,rowObject){
  224.                         return (moment(rowObject.departure_date).format("YYYY-MM-DD"));},width: 100, align:'center',formatoptions:''},
  225.                     {label:'平台来源',name: 'supplier_name',index: 'supplier_name',width: 60, sortable: false, align:'left'},
  226.                     {label:'客人信息',name: 'receive_mode',index: 'receive_mode',width: 200, sortable: false, align:'left'},
  227.                     {label:'姓名',name: 'name',index: 'name',width: 80, sortable: false,align:'center'},
  229.                     {label:'性别',name: 'gender',index: 'gender',width: 50, sortable: false, align:'center',formatter:opGrid.formatGender},
  230.                     {label:'年龄',name: 'age',index: 'age',width: 50,  align:'center', sorttype:'integer'},
  231.                     {label:'证件号',name: 'certificate_num',index: 'certificate_num',width: 150, sortable: false, align:'center'},
  232.                     {label:'电话',name: 'mobile',index: 'mobile',width: 110, sortable: false, align:'center'},
  233.                     {label:'籍贯',name: 'native_place',index: 'native_place',width: 120, sortable: false, align:'left'},
  235.                     {label:'产品套餐',name: 'remark',index: 'remark',width: 300, sortable: false, align:'left'},
  236.                     {label:'业务',name: 'order_mode',index: 'order_mode',width: 70, sortable: false, align:'center',  formatter:'select', formatoptions:{
  237.                         value:{ '1374':'长线',1475:'短线', '1476':'签证', '1486':'门票', '1487':'酒店', '1488':'专线', '1489':'包车', '1490':'组团', '1493':'推广', '1555':'石林九乡'}
  238.                     }
  239.                     },
  240.                     {label:'销售',name: 'sale_operator_name',index: 'sale_operator_name',width: 80, sortable: false, align:'center'},
  241.                     {label:'计调',name: 'operator_name',index: 'operator_name',width: 50, sortable: false, align:'center'},
  242.                     {label:'金额',name: 'total',index: 'total',width: 60, sorttype:'number', align:'center', formatter:opGrid.formatPerson}
  243.                 ],
  244.                 //sortable:true,
  245.                 //sortname: 'departure_date',
  246.                 //sortorder: 'asc',
  247.                 loadonce: true,//前端排序的关键属性
  248.                 pager: "#pagerGroupOrder",
  249.                 viewrecords: true,
  250.                 caption: "",
  251.                 jsonReader:{//分页的关键
  252.                     id: "group_id",
  253.                     root: "result",total: "totalPage",page: "pageBean",records: "totalCount",repeatitems: false
  254.                 },
  255.                 postData:opGrid.getParam(),
  256.                 footerrow: true,
  257.                 loadComplete:function(xhr){
  258.                     //查询为空的处理方式
  259.                     var rowNum = $("#contentGroupOrderTable").jqGrid('getGridParam','records');
  260.                     if (rowNum == '0'){
  261.                         if($("#norecords").html() == null)
  262.                             $("#contentGroupOrderTable").parent().append("</pre><div id='norecords' style='text:center;padding: 8px 8px;'>没有查询记录！</div><pre>");
  263.                         $("#norecords").show();
  264.                     }else{
  265.                         $("#norecords").hide();
  266.                     }
  268.                 }
  269.                 //,onSortCol: function (index, colindex, sortorder)
  270.                 //{
  272.                 /* 列排序事件，向server传值，值为当前的页数，可以传递多个参数。
  273.                  index, colindex, sortorder三个值可以不设值。 */
  274.                 //jQuery("#contentGroupOrderTable").jqGrid('setGridParam',{page:$('#page').val()});
  276.                 //}
  277.             });
  278.         }
  279.     }
  281.     function searchBtn() {
  282.         //前端分页先将datatype会变成local,所以必须先将其变为Json，点击查询按钮时才不会触发两次，就可以一次性加载数据了
  283.         $("#contentGroupOrderTable").setGridParam({datatype:'json', page:1}).jqGrid('setGridParam', {page:1, postData: opGrid.getParam()}).trigger("reloadGrid");
  284.     }
  285. </script>
  286. </body>
  287. <script type="text/javascript">
  288.     /* 导出XXX */
  289.     function toPickUpExcel(){
  290.         var curpagenum = $('#contentGroupOrderTable').getGridParam('page');
  291.         $("#page").val(curpagenum);
  292.         var startTime=$('#startTime').val();
  293.         var endTime=$('#endTime').val();
  294.         var receiveMode=$('#receiveMode').val();
  295.         var groupCode=$('#groupCode').val();
  296.         var supplierName=$('#supplierName').val();
  298.         var orgIds=$('#orgIds').val();
  299.         var orgNames=$('#orgNames').val();
  300.         var operType=$('#operType').val();
  301.         var saleOperatorIds=$('#saleOperatorIds').val();
  302.         var saleOperatorName=$('#saleOperatorName').val();
  304.         var orderMode=$('#dicIds').val();
  305.         var remark=$('#remark').val();
  306.         var page=$('#page').val();
  307.         var pageSize=$('#pageSize').val();
  308.         var userRightType=$('#userRightType').val();
  310.         var guestName=$('#guestName').val();
  311.         var gender=$('#gender').val()
  312.         var ageFirst=$('#ageFirst').val()
  313.         var ageSecond=$('#ageSecond').val()
  314.         var nativePlace=$('#nativePlace').val()
  316.         window.location ='../taobao/toGroupOrderGuesExport.do?startTime='+startTime
  317.                 +"&endTime="+endTime
  318.                 +"&receiveMode="+receiveMode
  319.                 +"&groupCode="+groupCode
  320.                 +"&supplierName="+supplierName
  321.                 +"&orgIds="+orgIds
  322.                 +"&orgNames="+orgNames
  323.                 +"&operType="+operType
  324.                 +"&saleOperatorIds="+saleOperatorIds
  325.                 +"&saleOperatorName="+saleOperatorName
  326.                 +"&orderMode="+orderMode
  327.                 +"&remark="+remark
  328.                 +"&page="+page
  329.                 +"&pageSize="+pageSize
  330.                 +"&userRightType="+userRightType
  331.                 +"&guestName="+guestName
  332.                 +"&gender="+gender
  333.                 +"&ageFirst="+ageFirst
  334.                 +"&ageSecond="+ageSecond
  335.                 +"&nativePlace="+nativePlace;
  336.     }
  337.     /* 导出YYY */
  338.     function toInsuranceExcel(){
  339.         var curpagenum = $('#contentGroupOrderTable').getGridParam('page');
  340.         $("#page").val(curpagenum);
  341.         var startTime=$('#startTime').val();
  342.         var endTime=$('#endTime').val();
  343.         var receiveMode=$('#receiveMode').val();
  344.         var groupCode=$('#groupCode').val();
  345.         var supplierName=$('#supplierName').val();
  347.         var orgIds=$('#orgIds').val();
  348.         var orgNames=$('#orgNames').val();
  349.         var operType=$('#operType').val();
  350.         var saleOperatorIds=$('#saleOperatorIds').val();
  351.         var saleOperatorName=$('#saleOperatorName').val();
  353.         var orderMode=$('#dicIds').val();
  354.         var remark=$('#remark').val();
  355.         var page=$('#page').val();
  356.         var pageSize=$('#pageSize').val();
  357.         var userRightType=$('#userRightType').val();
  359.         var guestName=$('#guestName').val();
  360.         var gender=$('#gender').val()
  361.         var ageFirst=$('#ageFirst').val()
  362.         var ageSecond=$('#ageSecond').val()
  363.         var nativePlace=$('#nativePlace').val()
  365.         window.location ='../taobao/downloadInsure.htm?startTime='+startTime
  366.                 +"&endTime="+endTime
  367.                 +"&receiveMode="+receiveMode
  368.                 +"&groupCode="+groupCode
  369.                 +"&supplierName="+supplierName
  370.                 +"&orgIds="+orgIds
  371.                 +"&orgNames="+orgNames
  372.                 +"&operType="+operType
  373.                 +"&saleOperatorIds="+saleOperatorIds
  374.                 +"&saleOperatorName="+saleOperatorName
  375.                 +"&orderMode="+orderMode
  376.                 +"&remark="+remark
  377.                 +"&page="+page
  378.                 +"&pageSize="+pageSize
  379.                 +"&userRightType="+userRightType
  380.                 +"&guestName="+guestName
  381.                 +"&gender="+gender
  382.                 +"&ageFirst="+ageFirst
  383.                 +"&ageSecond="+ageSecond
  384.                 +"&nativePlace="+nativePlace;
  385.     }
  388.     /* 导出到Excel */
  389.     function toGuestListExcel(){
  390.         var curpagenum = $('#contentGroupOrderTable').getGridParam('page');
  391.         $("#page").val(curpagenum);
  392.         $("#toGuestListExcelId").attr("href","toSaleGuestListExcel.do?startTime="+$("#startTime").val()
  393.                 +"&endTime="+$("#endTime").val()
  394.                 +"&receiveMode="+$("#receiveMode").val()
  395.                 +"&groupCode="+$("#groupCode").val()
  396.                 +"&orgIds="+$("#supplierName").val()
  397.                 +"&orgIds="+$("#orgIds").val()
  398.                 +"&orgNames="+$("#orgNames").val()
  399.                 +"&operType="+$("#operType").val()
  400.                 +"&saleOperatorIds="+$("#saleOperatorIds").val()
  401.                 +"&saleOperatorName="+$("#saleOperatorName").val()
  402.                 +"&orderMode="+$("#dicIds").val()
  403.                 +"&remark="+$("#remark").val()
  404.                 +"&page="+$("#page").val()
  405.                 +"&pageSize="+$("#pageSize").val()
  406.                 +"&userRightType="+$("#userRightType").val()
  407.                 +"&guestName="+$("#guestName").val()
  408.                 +"&gender="+$("#gender").val()
  409.                 +"&ageFirst="+$("#ageFirst").val()
  410.                 +"&ageSecond="+$("#ageSecond").val()
  411.                 +"&nativePlace="+$("#nativePlace").val());
  412.     }
  414.     function commonDicDlg() {
  415.         $.dicItemDlg('SALES_TEAM_TYPE','dicNames','dicIds');
  416.     }
  417. </script>
  418. <%@ include file="/WEB-INF/views/component/org-user/org_user_multi.jsp"%>
  419. </html>

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

  1. loadonce: true,

以及

  1. sorttype:'number',

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

发表评论

表情：
评论列表 （有 0 条评论，474人围观）

还没有评论，来说两句吧...

相关阅读