jqGrid翻页无效果debug经历

现象

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

开始调试

  • 打开chrome开发模式查看网络请求

    • 正常情况(未点击查询按钮)
      • 点击菜单

      - 点击下页按钮

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


      - 点击翻页按钮 >

  • 发现是查询逻辑丢掉了page信息

  • 查看代码

    • list初始化

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
        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);
      });

      }
      });

      • 查询按钮逻辑

      1
      2
      3
      4
      5
        /*查询按钮*/
      $('#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()})

1
2
3
4
5
/*查询按钮*/
$('#search').click(function(){
jQuery(grid_selector).jqGrid('clearGridData').jqGrid('setGridParam', { postData: $('#search_form').serializeJSON()}).jqGrid('setGridParam', { 'page': 1 })
.trigger("reloadGrid");
});

至此问题解决