jqgrid 分页

1 篇文章 0 订阅

前面工作中分页用到的少,最近工作需要用到分页了这里和大家简单的分享一下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能显示同时分页也可以显示。

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


分页属性大概是这些内容,我经常用的则是设置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的博友可以深入的了解一下。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值