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=" 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=" 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,autotrue, shrinkToFit:true,/* autoScroll: false, *//*forceFit: true, */ 6 colNames:["商品ID","商品名称","商品单价","库存","上架日期","上架时间","商品描述","操作 "], 7 colModel:[{name:"GOODS_ID",index:"GOODS_ID",autotrue,align:"center"}, 8 {name:"GOODS_NAM",index:"GOODS_NAM",autotrue,align:"center"}, 9 {name:"GOODS_PRICE",index:"GOODS_PRICE",autotrue,align:"center"}, 10 {name:"G_STOCK",index:"G_STOCK",autotrue,align:"center"}, 11 {name:"UP_SHELVES_DAT",index:"UP_SHELVES_DAT",autotrue,align:"center"}, 12 {name:"UP_SHELVES_TIM",index:"UP_SHELVES_TIM",autotrue,align:"center"}, 13 {name:"G_DESC",index:"G_DESC",autotrue,align:"center"}, 14 {name:"edit",index:"edit",autotrue,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' onclick='purchase("+ id +")' >采购</button>"; 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/