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">商品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});
}
},
})
});

点击按钮 获取行数据

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

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

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

效果

jqGrid jqGrid分页参数+条件查询

注意,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/

上一篇:make menuconfig 笔记


下一篇:5G NR 介绍