为了减轻数据库压力和提高加载速度,生成了纯JSON文件,想在本地自动分页,找了N多API均没有详细的介绍,在一次加载属性时加入了loadonce:true属性结果发现jqGrid自带的分页功能生效了。哎,总算解决了问题。官方的API不知是写的不够清楚,还是本人理解有问题,花费这么多时间在这个分页上面。解决就好,遂与大家分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>本地数据测试</title>
<style type="text/css">
*{margin:0; padding:0;}
body{
font-size:12px;
}
</style>
<link href="css/ui.jqgrid.css" rel="Stylesheet" />
<link href="css/redmond/jquery-ui-1.8.23.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery.1.3.2.js"></script>
<script type="text/javascript" src="js/grid.locale-cn.js"></script> <!-- 引入这个是为了对中文的支持 -->
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var colN,colM;
$.ajax({
type: "POST",
url:"./report_json/report_header_20121203164057.json",
data: "json",
success:function(response){//reponse-回发数据
//alert(response);
eval("var response="+response);
colN= response.colNames; //得到colNames
colM = response.colModel; //得到colModel
$("#list1").jqGrid({
url:"./report_json/report_content_20121203164057.json",
datatype: "json",
mtype:'GET',
height: 300,
autowidth:true,
colNames: colN,
colModel: colM,
shrinkToFit:true,
//multiselect: true,
viewrecords: true,
sortable:true,
sortname: "id",
sortorder:"desc",
pager: "#pager1",
rowNum: 3,
rowList: [15, 30, 60,90],
//grouping:true,
loadonce:true,//关键所在
userDataOnFooter: true,
buttonicon:'ui-icon-newwin'
,caption: "IBM Report"});
/* .navGrid('#pager1',{edit:false,add:false,del:false})
//新增下载buttion
.navButtonAdd('#pager1',{
caption:"",title:"Export Excel",
buttonicon:"ui-icon-disk",
onClickButton: function(){
window.open('getjson.jsp?flag=down','downfile','width=300,height=130,toolbar=no,resizable=no,menubar=no,status=no');
// $.post("getjson.jsp", { flag: "1" },function(data){});
},position:"last"})
*/
}});
});
//重新载入jqgrid数据
function testquery(){
jQuery("#gridTable").setGridParam({page:1}).trigger("reloadGrid");
}
function testclear(){
jQuery("#list1").jqGrid('clearGridData');
}
</script>
</head>
<body>
<div id="gridPager">
<table id="list1" ></table>
<div id="pager1" ></div>
</div>
</body>
</html>
提供一个简单的Demo地址:http://download.csdn.net/detail/thl331860203/4873539
分享到:
相关推荐
Jqgrid json 自身带的分页功能, 为了减轻数据库压力和提高加载速度,生成了纯JSON文件,想在本地自动分页,找了N多API均没有详细的介绍,最终摸索出来一个属性本身就自带分页功能,与大家分享
jqgrid加载本地数据并且分页例子,下载直接搭环境使用
基于jqgrid实现类似父子级树形菜单分页列表查询,让table页的行元素可以实现像ztree那样的上下级关系
本Demo利用Jquery的jqgrid插件利用本地资源数据,实现分页。
; charset=utf-8"> <title>Insert title here <link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> ... $("#list").jqGrid({ ...<table id="list"></table> <div id="pager"></div> </body>
jqgrid 导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG,PDF格式
JqGrid EF分页
jqgrid加载本地数据并且分页例子
本程序利用Jqgrid实现本地数据的分页!
JQGrid分页,包括CSS及JS文件。可直接在MyEclipse上直接运行。
table表格样式利用jqgrid实现
<table id="list2"></table> <div id="pager2"></div> jQuery("#list2").jqGrid({ url:'data/data.php', datatype: "json", colNames:['编号','标题', '分类', '作者','发布时间','状态','点击'], colModel:[ ...
tableExport 中文修正+jqgrid修正 表格导出插件,本插件在前人修正的基础上针对几个问题进行了修改,20170722修正以下问题:1.解决jqgrid无法获取表头问题;2.jqgrid开头有一空行问题;3.部分格式导出无扩展名问题;4....
jqGrid 学习 配置 json 35 jqGrid 学习 方法 37 jqGrid 学习 事件 45 jqGrid 学习 数据 48 jqGrid 学习 ColModel API 55 jqGrid 学习 参数(2) 57 jqGrid 学习 jqGrid 参数 63 jqGrid 学习 第一个实例 63 使用 ...
现在把找好的分页参数跟大家分享下
通过修改bootstrap table js 定制出自己的分页栏,样式仿照jqGrid样式,支持输入页码跳转
wiki_options - jqGrid Wiki wiki_colmodel_options - jqGrid Wiki wiki_methods - jqGrid Wiki wiki_events - jqGrid Wiki 4个pdf文件
NULL 博文链接:https://johnson-gong.iteye.com/blog/1921058
jqGrid 4.1 以json方式传递参数实现添加、删除、更新操作