jqgrid 分页

前面工作中分页用到的少，最近工作需要用到分页了这里和大家简单的分享一下jqgrid的分页

jqgird可以通过设置属性进行分页，在jqgird的官网也有例子，我这里就用我工作中的页面来叙述一下。

首先是jqgrid的加载代码：

<span style="font-size:18px;"><span style="font-size:18px;">var sectionId = $("#sectionId").val();
jQuery("#<strong>quotePrice</strong>").jqGrid({
url: '<c:url value="/bid/sarchQuotePrice.action"/>?returnType=JQGRID§ionId='+sectionId+'&rowNum=10',
datatype: "json",
mtype: "POST",
height: 250,
   colNames:['id','报价排名', '报价人', '最新报价时间','最新报价（元）','报价币种'],
   colModel:[
   {name:'id',index:'id',hidden:true},
   {name:'priceCount',index:'priceCount',width:"100",sortable:false},
   {name:'tendersName',index:'tendersName',width:"100",align:"center",sortable:false},
   {name:'submitTime',index:'submitTime',width:"100",sortable:false,
   	formatter: 'date', formatoptions: {srcformat:'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s'}},
   {name:'totalPrice',index:'totalPrice',width:"100",align:"right",sortable:false, formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:"."}},
   {name:'tendersCurrencyName',index:'tendersCurrencyName',width:"80",align:"center",sortable:false}
   ],
	   	rowNum:10,
	   	pager: '<strong>#userPager</strong>',
// 	   	rowList:[10,20,30],
	   	width:'960',	   		   	
	   	height: 'auto',
	   	cellEdit: true,
	   	resize:false, 
	   	multiselect: false, // 多选
	   	hidegrid: false, // 隐藏
	    viewrecords: true,
	    forceFit: true,
	    jsonReader: {
      		root: "rows",
      		page: "page",
     		total: "total",
     		records: "records", 
        	repeatitems : false
     	},
     	loadError : function(xhr,st,err) {
    	},
    	onPaging : function(pgButton){
    			var sectionId = $("#sectionId").val();
    		    var url = '<c:url value="/bidarchQuotePrice.action"/>?returnType=JQGRID§ionId='+sectionId+'&rowNum=' + $('#userList').jqGrid('getGridParam','rowNum');
			    $("#userList").jqGrid('setGridParam',{datatype:"json",url:url}).trigger("reloadGrid");
    	},
		gridComplete:function(){

        },
    	loadComplete : function(xhr){
       		if (window.parent && window.parent.TuneHeight && typeof window.parent.TuneHeight=='function') {
           		window.parent.TuneHeight('frame' , 'frame');
           	}
        },
	    caption:"监控竞价"
});</span></span>

jqgrid的载体quotePrice，分页的载体userPager，所以这两个内容要在jsp页面中出现

<span style="font-size:18px;"> <table id="quotePrice"> </table>
<div id="userPager"></div>
</span>

这样Grid能显示同时分页也可以显示。

属性名	类型	说明	默认值	是否可以被修改
lastpage	integer	只读属性，指定请求总共可以返回多少页。	0	NO
pager	mixed	导航栏对象，必须是一个有效的html元素，位置可以随意	空字符串	NO
pagerpos	string	定义导航栏的位置，默认分为三部分：翻页，导航工具及记录信息	center	NO
pgbuttons	boolean	是否显示翻页按钮	true	NO
pginput	boolean	是否显示跳转页面的输入框	true	NO
pgtext	string	页面信息，第一个值是当前页第二个值是总页数	语言包	YES
reccount	integer	只读属性，实际记录数，千万不能跟records 参数搞混了，通常情况下他们是相同的，假如我们定义rowNum=15， 但我们从服务器端返回的记录为20即records=20，而reccount=15，表格中也显示15条记录。	0	NO
recordpos	string	定义记录信息的位置，可选值：left, center, right	right	NO
records	integer	只读属性，从服务器端返回的记录数	none	NO
recordtext	string	显示记录的信息，只有当viewrecords为true时起效，且记录数必须大于0	语言包	yes
rowList	array[]	可以改变表格可以显示的记录数，格式为[10,20,30]	空array[]	no
rowNum	integer	设置表格可以显示的记录数	20	yes
viewrecords	boolean	是否要显示总记录数信息	false	no

分页属性大概是这些内容，我经常用的则是设置rowNum和rowList

分页事件onpaging点击分页按钮时触发查询方法。

下面的内容是从一些jqgrid相关文章找到的

<span style="font-size:18px;">jsonReader : {
	root: "rows",	// json中代表实际模型数据的入口
    page: "page",	// json中代表当前页码的数据
	total: "total",	// json中代表页码总数的数据
	records: "records", // json中代表数据行总数的数据
	repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
	cell: "cell",
	id: "id",
	userdata: "userdata",
	subgrid: {
		root:"rows", 
		repeatitems: true, 
		cell:"cell"
	}
}</span>

jqgrid的分页内容的前端我用到的内容大致就这些，这篇文章http://blog.csdn.net/gengv/article/details/5714834# 介绍jqgrid的内容不错，想了解或者深入使用jqgrid的博友可以深入的了解一下。