jqGrid jqGrid分页参数+条件查询

HTML

<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">商品IDlabel>
                        <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

 1 /* -----------------------------加载表数据  开始  -------------------------------- */ 
 2 $(document).ready(function(){
 3     $.jgrid.defaults.styleUI="Bootstrap";
 4       $("#table_list_2").jqGrid({
 5           height:434,autowidth:true, shrinkToFit:true,/*  autoScroll: false, *//*forceFit: true, */
 6              colNames:["商品ID","商品名称","商品单价","库存","上架日期","上架时间","商品描述","操作 "],
 7              colModel:[{name:"GOODS_ID",index:"GOODS_ID",autowidth:true,align:"center"},
 8                       {name:"GOODS_NAM",index:"GOODS_NAM",autowidth:true,align:"center"},
 9                       {name:"GOODS_PRICE",index:"GOODS_PRICE",autowidth:true,align:"center"},
10                       {name:"G_STOCK",index:"G_STOCK",autowidth:true,align:"center"},
11                       {name:"UP_SHELVES_DAT",index:"UP_SHELVES_DAT",autowidth:true,align:"center"},
12                       {name:"UP_SHELVES_TIM",index:"UP_SHELVES_TIM",autowidth:true,align:"center"},
13                       {name:"G_DESC",index:"G_DESC",autowidth:true,align:"center"},
14                       {name:"edit",index:"edit",autowidth:true,align:"center"}
15                       ],
16              pager:"#pager_list_2",
17              viewrecords:true,hidegrid:false,
18              url:"<%=path %>/terminal/findGoodInfo",
19              datatype:'json',
20              rownumbers: true,  
21              rowNum : 10,
22              rowList : [ 10, 15,30 ],
23              jsonReader: {  
24                   root:"dataList", page:"currPage", total:"totalpages",          //   很重要 定义了 后台分页参数的名字。
 25                   records:"totalCount", repeatitems:false, id : "id"
26              },
27             gridComplete: function () {         // 数据加载完成后 添加 采购按钮 
28                 var ids = jQuery("#table_list_2").jqGrid('getDataIDs');
29                 for (var i = 0; i < ids.length; i++) {
30                  var id = ids[i];
31                  var editBtn = "采购";
32                  jQuery("#table_list_2").jqGrid('setRowData', ids[i], { edit: editBtn});
33                 }
34              },
35       })
36 });

点击按钮 获取行数据

1 function purchase(id){
2        var model = jQuery("#table_list_2").jqGrid('getRowData', id);
3        var GOODS_ID = model.GOODS_ID;
4        var GOODS_NAM = model.GOODS_NAM;
5        var GOODS_PRICE = model.GOODS_PRICE;
　　}

条件查询  点击查询按钮的时候：

$(function(){ 
        $("#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"); //重新载入 
        }); 
    });

效果

注意，jsonReader    很重要

需要定义jsonReader来跟服务器端返回的数据做对应

jsonReader的重要分页属性属性

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

 

 

 

 

 

 

 

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

服务器返回的json格式

{totalpages: "xxx",   

currPage: "yyy",  

totalCount: "zzz",  

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/