jqGrid jqGrid分页参数+条件查询

客官°小女子只卖身不卖艺 2022-05-28 04:39 221阅读 0赞

#     #

HTML

![复制代码][copycode.gif]

![复制代码][copycode.gif]

table\_list\_2    数据显示的地方                pager\_list\_2    表格下面的分页参数

![复制代码][copycode.gif]

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 = "<button  style='color:#f60' οnclick='purchase("+ id +")' >采购</button>";
    32                  jQuery("#table_list_2").jqGrid('setRowData', ids[i], { edit: editBtn});
    33                 }
    34              },
    35       })
    36 });

![复制代码][copycode.gif]

点击按钮 获取行数据

![复制代码][copycode.gif]

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;
    　　}

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

效果

![832256-20160701104159077-1618354221.png][]

注意，jsonReader    很重要

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

jsonReader的重要分页属性属性

<table style="margin:0px;padding:0px;border-spacing:0px;max-width:850px;border:1px solid #C0C0C0;width:418px;height:196px;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;"><span style="margin:0px;padding:0px;">root</span></pre></td> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;">包含实际数据的数组</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;">page</pre></td> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;">当前页</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;">total</pre></td> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;">总的页数</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;">totalCount</pre></td> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;">总的记录数（查出来的总条数）</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;">&nbsp;</td> 
   <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

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/

[copycode.gif]: /images/20220528/3a3e0b557b4c448c8068d2740fdd3f50.png
[832256-20160701104159077-1618354221.png]: /images/20220528/263921b384884e8d98d219078f2803ed.png