jqGrid Table 纯Json自带分页

为了减轻数据库压力和提高加载速度，生成了纯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

posted on 2012-12-11 16:35 暗夜螃蟹阅读(269) 评论(0) 收藏举报