现象

直接点击餐单,后不点击查询按钮,在点击翻页按钮,没有问题 如果点击查询按钮后,再点击 翻页按钮,页面刷新不翻页

开始调试

  • 打开chrome开发模式查看网络请求
    • 正常情况(未点击查询按钮)
      • 点击菜单

      • 点击下页按钮

    • 异常情况
      • 点击查询按钮

        \

      • 点击翻页按钮

  • 发现是查询逻辑丢掉了page信息
  • 查看代码
    • list初始化

      jQuery(grid_selector).jqGrid({
              url:'list',
              postData: {'receiptBizType':$('#search_receiptBizType').val()},
              datatype: 'json',     
              mtype: "POST",
              height: "100%",
              rownumbers: true,
              rownumWidth:50,
              colNames:['','回单ID','回单编号','门店共用码','业务类型', '金额','备注','业务日期','状态','订单ID','创建时间','更新时间'],
              colModel:[
                  {name:'action',hidden:false,width:30,fixed:true},
                  {name:'bankReceiptId',sortable:false,editable:false,key:true},
                  {name:'receiptNo',index:'receipt_no',editable:false},
                  {name:'commonCode',index:'common_code',editable:false},
                 // {name:'accoutnName',index:'accoutnName',editable:false},
                  {name:'receiptBizType',index:'receipt_biz_type',editable:false,formatter:getHideListValue,formatoptions: {code:'TRANS_TYPE'}},
                  {name:'amount',index:'amount',editable:false,formatter:currencyFormatter, formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, divide:100,prefix: "¥"}},
                  //{name:'hamount',index:'hamount',editable:false,formatter:currencyFormatter, formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "¥"}},
                  {name:'bizRemark',index:'biz_remark',sortable:false,editable:false},
                  {name:'bizDate',index:'biz_date',editable:false,formatter:dateFormatter,formatoptions:{dateFormat:'yyyy-MM-dd'}},
                  {name:'state',editable:false,formatter:getHideListValue,formatoptions: {code:'BANK_RECEIPT_STATE'},unformat:getHideListValueReverse},
                  {name:'ordId',index:'ordId',sortable:false,editable:false},
                  {name:'createDate',index:'create_date',editable:false,formatter:dateFormatter,formatoptions:{dateFormat:'yyyy-MM-dd hh:mm:ss'}},
                  {name:'lastUpdateDate',index:'last_update_date',editable:false,formatter:dateFormatter,formatoptions:{dateFormat:'yyyy-MM-dd hh:mm:ss'}},
              ],
              viewrecords : true,
              rowNum:10,
              rowList:[10,20,50],
              pager : "#grid-pager",
              multiselect: false,
              multiboxonly: false,
              altRows: true,
              autowidth: true,
              autoScroll: false,
              caption: "银行回单列表",
              emptyrecords: "未查询到数据",
              jsonReader : {   
                root:"result",
                total:'totalPages',
                page:'page',
                records:'records'   
              },
              loadComplete : function() {
                  var table = this;
                  setTimeout(function(){
                      updatePagerIcons(table);
                  }, 0);
              },
              gridComplete : function(){
                  var ids = jQuery(grid_selector).jqGrid('getDataIDs');
                  for(var i=0;i < ids.length;i++){
                      var cl = ids[i];
                      var rowData = $(grid_selector).getRowData(cl);
                      checkbox = "<label><input name=\"grid-checkbox\" value=\""
                          + rowData.bankReceiptId + "\"type=\"checkbox\" class=\"ace\"><span class=\"lbl\"></span></label>";
                      jQuery(grid_selector).jqGrid('setRowData',ids[i],{action:checkbox});
                  }
                  /**
                   * 窗口缩放时,经动态变化宽度
                   */
                  $(window).resize(function(){
                      var winwidth=$('.page-content').width(); 	//当前页面的宽度
                      $(grid_selector).setGridWidth(winwidth);
                      $('.ui-jqgrid-bdiv').css('width',winwidth+1);
                  });
      
                  /**
                   * 点击菜单边框收缩菜单时,动态变化表格宽度
                   */
                  $('#sidebar-collapse').click(function(){
                      var winwidth=$('.main-content .col-xs-12').width(); 	//当前窗口中,一行的宽度
                      $(grid_selector).setGridWidth(winwidth);
                      $('.ui-jqgrid-bdiv').css('width',winwidth+1);
                  });
      
              }
          });
      
      • 查询按钮逻辑
      /*查询按钮*/
          $('#search').click(function(){
              jQuery(grid_selector).jqGrid('clearGridData').jqGrid('setGridParam', { postData:  $('#search_form').serialize()}).jqGrid('setGridParam', { 'page': 1 })
                  .trigger("reloadGrid");
          });
      
  • 没发现异常,删除.jqGrid('setGridParam', { postData: $('#search_form').serialize()}).后虽然没过滤,但可以翻页,网上查看发现别人在这块的查询参数都是一个一个拼接的json,应该是.serialize()不是json导致的(虽然后台也能接到这些参数),一个一个拼接太麻烦,而且增加查询字段的时候页面添加这里也得添加,容易忘掉,所以当时就是用form的serialize方法一劳永逸,既然此法不行就换个,把整个form转成json,网上有不少自己写的小工具,逻辑就是取出form的所有输入框,循环拼接json,太麻烦,而且每个页面都得加这个工具类,既然已经有这样的需求应该有更好的轮子,果然到github上找到了一个jquery插件叫 jquery.serializeJSON,将这个插件引入到公共页面,小改下代码,将$('#search_form').serialize()改为 $('#search_form').serializeJSON()})
/*查询按钮*/
$('#search').click(function(){
        jQuery(grid_selector).jqGrid('clearGridData').jqGrid('setGridParam', { postData:  $('#search_form').serializeJSON()}).jqGrid('setGridParam', { 'page': 1 })
    .trigger("reloadGrid");
});

至此问题解决