前面工作中分页用到的少,最近工作需要用到分页了这里和大家简单的分享一下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的博友可以深入的了解一下。