1、定義table
2、初始加載jqGrid
$(function () {
$("#jqGrid").jqGrid({
url: '../../../../list',
datatype: "json",
colModel: [
{ label: 'id', name: 'id', index: 'ID', width: 50, key: true },
{ label: '項目名稱', name: 'itemName', index: 'ITEM_NAME', width: 80 },
{ label: '項目副標題', name: 'itemSecname', index: 'ITEM_SECNAME', width: 80 },
{ label: '項目分類', name: 'itemType', index: 'ITEM_TYPE', width: 80 },
{ label: '項目地址', name: 'address', index: 'ADDRESS', width: 80 },
{ label: '省', name: 'province', index: 'PROVINCE', width: 80 },
{ label: '市', name: 'city', index: 'CITY', width: 80 },
{ label: '區', name: 'area', index: 'AREA', width: 80 },
{ label: '所屬醫生', name: 'doctorId', index: 'DOCTOR_ID', width: 80 },
{ label: '項目原價', name: 'price', index: 'PRICE', width: 80 },
{ label: '項目折後價', name: 'discountPrice', index: 'DISCOUNT_PRICE', width: 80 },
{ label: '項目簡介', name: 'descr', index: 'DESCR', width: 80 },
{ label: '爆品服務值', name: 'score', index: 'SCORE', width: 80 },
{ label: '預約人數', name: 'appointCount', index: 'APPOINT_COUNT', width: 80 },
{ label: '預約基數', name: 'baseCount', index: 'BASE_COUNT', width: 80 }
],
viewrecords: true,
height: 385,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
pager: "#jqGridPager",
jsonReader : {
root: "data.list",
page: "data.currPage",
total: "data.totalPage",
records: "data.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
gridComplete:function(){
//隱藏grid底部滾動條
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
}
});
});
3、更改數據源,刪除原來jqGrid中的數據,加載新數據
$("#jqGrid").jqGrid('clearGridData');
var itemURL = '../../../../list?itemType='+input_type.val();
$("#jqGrid").setGridParam({url:itemURL}).trigger("reloadGrid");