jqGrid的使用

页面加入：

<div class="grid-wrap">
        <table id="unRelatedAuditStaffOrderGrid">
        </table>
        <div id="unRelatedAuditStaffOrderPager"></div>
 </div>

js代码：

var url=rootPath, gridQryUrl = url+"/oneLevelStaffAuditWorkDataList",unRelatedAuditStaffOrderGridQryUrl = url+"/unRelatedAuditStaffOrderList";
//alert("rootPath:" + rootPath);
var model=avalon.define({
	$id:"mainCtrl",mainInfo:{},dailyPhrase:{},
	user:SYSTEM.user,month_over:0,concatRecordList:[],noticeList:[],
	init:function(){
		this.loadGrid("#auditWorkGrid","#auditWorkPager",gridQryUrl,'');
		this.loadGrid("#unRelatedAuditStaffOrderGrid","#unRelatedAuditStaffOrderPager",unRelatedAuditStaffOrderGridQryUrl,'');
	},
	reloadGrid:function(gridLabel,pagerLabel,queryUrl,olStateCd){
		var param = {"olStateCd":olStateCd};
		var $pager = pagerLabel;
		$(gridLabel).jqGrid("setGridParam", {
			url:queryUrl,
			datatype:"json",
			mtype:'GET',
			pager: $pager,
			postData:param
		}).trigger("reloadGrid");
	},
	loadGrid:function(gridLabel,pagerLabel,queryUrl,olStateCd){
		var param = {"olStateCd":olStateCd};
		var $pager = jQuery(pagerLabel);
		$(gridLabel).jqGrid({
			url:queryUrl,
			postData:param,
			datatype: "json",
			mtype: 'GET',
			colNames: ['购物车ID', '购物车流水', '接入号', '客户名称', '受理渠道', '受理员工', '稽核订单状态','稽核类型','工作类型'],
			colModel: [
				{ name: 'olid', index: 'olId', width: 150, align: "center",search: false},
				{ name: 'olnbr', index: 'olnbr', width: 150, align: "center" },
				{ name: 'accessnumber', index: 'accessnumber', width: 100, align: "center" },
				{ name: 'partyname', index: 'partyname', width: 100, align: "center", search: false },
				{ name: 'channelname', index: 'channelname', width: 250, align: "center", search: false },
				{ name: 'staffname', index: 'staffname', width: 150, align: "center", search: false },
				{ name: 'olstatename', index: 'olstatename', width: 100, align: "center", search: false },
				{ name: 'marking', index: 'marking', width: 100, align: "center", search: false },
				{ name: 'actiontypename', index: 'actiontypename', width: 100, align: "center", search: false }
			],
			rowList: [10, 20, 30],
			sortname: 'olid',
			viewrecords: true,
			sortorder: "desc",
			jsonReader: {
				root: "data.list",
				total: "data.totalPage",
				page: "currpage",
				records: "data.totalRow",
				repeatitems: false
			},
			loadError:function() {
				parent.Public.tips({
					type:1,
					content:"加载数据异常！"
				})
			},
			pager: $pager,
			rowNum: 5,
			altclass: 'altRowsColour',
 			width: 'auto',
			height: 280
		});
	}
});
model.init();

$(function() {
	var $totalNumDiv = $("#totalNumDiv");
	var $unConfirmNumDiv = $("#unConfirmNumDiv");
	var $transferNumDiv = $("#transferNumDiv");
	var $dealNumDiv = $("#dealNumDiv");
	var $auditFailedNumDiv = $("#auditFailedNumDiv");
	// 绑定事件
	// 工作总量
	$totalNumDiv.unbind("click").bind("click",function(){
		var olStateCd = '';
		model.reloadGrid("#auditWorkGrid","#auditWorkPager",gridQryUrl,olStateCd);
	});
	// 待认定数量
	$unConfirmNumDiv.unbind("click").bind("click",function(){
		var olStateCd = 1;
		model.reloadGrid("#auditWorkGrid","#auditWorkPager",gridQryUrl,olStateCd);
	});
	// 转派数量
	$transferNumDiv.unbind("click").bind("click",function(){
		var olStateCd = 10;
		model.reloadGrid("#auditWorkGrid","#auditWorkPager",gridQryUrl,olStateCd);
	});
	// 已处理数量
	$dealNumDiv.unbind("click").bind("click",function(){
		var olStateCd = 6;
		model.reloadGrid("#auditWorkGrid","#auditWorkPager",gridQryUrl,olStateCd);
	});
	// 审核未通过数量
	$auditFailedNumDiv.unbind("click").bind("click",function(){
		var olStateCd = 8;
		model.reloadGrid("#auditWorkGrid","#auditWorkPager",gridQryUrl,olStateCd);
	});
	
	
});

 

页面效果：