现象
直接点击餐单，后不点击查询按钮，在点击翻页按钮，没有问题
<!-- 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
77jQuery(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");
});
