jqGrid jqGrid分页参数与条件查询

话不多说，先上代码：

<div class="row">
	<div class="col-sm-20">
		<form id="formSearch" class="form-horizontal">
			<div class="form-group" style="margin-top:15px">
				<label class="control-label col-sm-1" style="margin-left: 20px;" for="GOODS_ID">商品ID</label>
				<div class="col-sm-2">
					<input type="text" class="form-control" id="GOODS_ID" name="GOODS_ID">
				</div>
				<label class="control-label col-sm-1" style="width: 120px" for="GOODS_NAM">商品名称 </label>
				<div class="col-sm-2">
					<input type="text" class="form-control" id="GOODS_NAM">
				</div>
				<div class="col-sm-1" style="text-align:center;">
					<button type="button"  id="find_btn" class="btn btn-primary">查询</button>
				</div>
			</div>
		</form>
		<div class="ibox-content">
			<div class="jqGrid_wrapper">
				<table id="table_list_2"></table>
				<div id="pager_list_2" style="width: 100%"></div>
			</div>
		</div>
	</div>
</div>

#其中
table_list_2 数据显示的地方
pager_list_2 表格下面的分页参数

js代码：

/* -----------------------------加载表数据  开始  -------------------------------- */ 
$(document).ready(function(){
    $.jgrid.defaults.styleUI="Bootstrap";
      $("#table_list_2").jqGrid({
          height:434,autowidth:true, shrinkToFit:true,/*  autoScroll: false, *//*forceFit: true, */
             colNames:["商品ID","商品名称","商品单价","库存","上架日期","上架时间","商品描述","操作 "],
             colModel:[{name:"GOODS_ID",index:"GOODS_ID",autowidth:true,align:"center"},
                      {name:"GOODS_NAM",index:"GOODS_NAM",autowidth:true,align:"center"},
                      {name:"GOODS_PRICE",index:"GOODS_PRICE",autowidth:true,align:"center"},
                      {name:"G_STOCK",index:"G_STOCK",autowidth:true,align:"center"},
                      {name:"UP_SHELVES_DAT",index:"UP_SHELVES_DAT",autowidth:true,align:"center"},
                      {name:"UP_SHELVES_TIM",index:"UP_SHELVES_TIM",autowidth:true,align:"center"},
                      {name:"G_DESC",index:"G_DESC",autowidth:true,align:"center"},
                      {name:"edit",index:"edit",autowidth:true,align:"center"}
                      ],
             pager:"#pager_list_2",
             viewrecords:true,hidegrid:false,
             url:"<%=path %>/terminal/findGoodInfo",
             datatype:'json',
             rownumbers: true,  
             rowNum : 10,
             rowList : [ 10, 15,30 ],
             jsonReader: {  
                  root:"dataList", page:"currPage", total:"totalpages",          //   很重要 定义了 后台分页参数的名字。
                  records:"totalCount", repeatitems:false, id : "id"
             },
            gridComplete: function () {         // 数据加载完成后 添加 采购按钮 
                var ids = jQuery("#table_list_2").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                 var id = ids[i];
                 var editBtn = "<button  style='color:#f60' onclick='purchase("+ id +")' >采购</button>";
                 jQuery("#table_list_2").jqGrid('setRowData', ids[i], { edit: editBtn});
                }
             },
      });
	  
	  条件查询  点击查询按钮的时候：
	  $("#find_btn").click(function(){ 
		var GOODS_ID = escape($("#GOODS_ID").val()); 
		var GOODS_ID = escape($("#GOODS_NAME").val()); 
		$("#table_list_2").jqGrid('setGridParam',{ 
			url:"goood/query.do", 
			postData:{'GOODS_ID':GOODS_ID,'GOODS_NAME':GOODS_NAME}, //发送数据 
			page:1 
		}).trigger("reloadGrid"); //重新载入 
	}); 
});
 
 
点击按钮 获取行数据
function purchase(id){
   var model = jQuery("#table_list_2").jqGrid('getRowData', id);
   var GOODS_ID = model.GOODS_ID;
   var GOODS_NAM = model.GOODS_NAM;
   var GOODS_PRICE = model.GOODS_PRICE;
   //向后台交互的步骤在这里省略了...
   
}

效果图如下：

注意，jsonReader 很重要
需要定义jsonReader来跟服务器端返回的数据做对应

jsonReader的重要分页属性属性如下：

root ： 包含实际数据的数组
page ：当前页
total ： 总的页数
totalCount ： 总的记录数（查出来的总条数）

jsonReader: { 
    root:"dataList", page:"currPage", total:"totalpages", // 很重要 定义了 后台分页参数的名字。
    records:"totalCount", repeatitems:false, id : "id"
},

服务器返回的json格式

{
	totalpages: "10",   
	currPage: "1",  
	totalCount: "96",  
	dataList: [  
	{AGENTID:"1",STATUS:"1", AGTNAM:"1", APPLYDAT:"1", AGTTEL:"1", USER_ID:"1"},  
	{AGENTID:"1",STATUS:"1", AGTNAM:"1", APPLYDAT:"1", AGTTEL:"1", USER_ID:"1"}] 
}

数据会通过 colModel 中的name 自动装填

1.jqGrid初始化参数
http://blog.mn886.net/jqGrid/

2.jqGrid colModel 参数
http://blog.mn886.net/jqGrid/