`
tanglong8848
  • 浏览: 72872 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

分享到：
| JSP 中文传参问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jqgrid本地数据分页

    在jqGrid中，本地数据分页可以通过设置`datatype`为`local`来实现。这样做可以减少服务器负载，因为只需要传输当前页面所需的数据。 **jqGrid本地数据分页实现步骤** 1. **引入jqGrid库和样式** 首先，在HTML文件...

    jqGrid 做的表格分页

    ; charset=utf-8"&gt; &lt;title&gt;Insert title here &lt;link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"&gt; ... $("#list").jqGrid({ ...&lt;table id="list"&gt;&lt;/table&gt; &lt;div id="pager"&gt;&lt;/div&gt; &lt;/body&gt;

    table表格样式利用jqgrid实现

    在网页开发中，表格（Table）是展示数据的重要方式，而jqGrid是一个强大的JavaScript库，专门用于创建交互式、功能丰富的表格。本教程将深入探讨如何利用jqGrid来实现美观且功能丰富的表格样式。 首先，我们需要...

    jqgrid加载本地数据分页Demo

    在这个"jqgrid加载本地数据分页Demo"中，我们将深入探讨如何利用jqGrid实现本地数据的分页显示。 1. **jqGrid的基本结构** jqGrid由Tomasz Wegrzan开发，基于jQuery库。它的核心功能包括数据的加载、排序、搜索、...

    PHP jqGrid 数据网格显示并分页

    在"jqgrid分页"这个项目中，我们将看到如何配置jqGrid以实现动态加载数据并进行分页。 第一步，我们需要在HTML中引入jqGrid的JavaScript和CSS文件。这通常包括`jquery.js`、`jquery.jqgrid.min.js`和相应的主题CSS...

    JQGrid的简单应用及第三方分页的实现 .NET实现

    本篇将深入探讨JQGrid的简单应用以及如何利用.NET实现第三方分页功能。 一、JQGrid基础应用 1. 初始化JQGrid：在HTML页面中，我们需要引入JQGrid的JavaScript和CSS文件，然后创建一个空的表格元素。JQGrid的初始化...

    jqGrid分页

    **jqGrid分页详解** jqGrid是一款非常流行的JavaScript表格插件，它允许用户在Web页面上展示大量数据并实现高效的数据分页、排序和搜索功能。这个压缩包中包含了一系列必要的资源，包括jar包、CSS文件和JS文件，...

    aspx jqgrid 分页、excel导出最佳实践

    `aspx jqgrid`是一个非常流行的JavaScript数据网格控件，它提供了强大的数据管理功能，包括分页、排序、搜索以及自定义操作。本实践主要探讨如何在ASP.NET环境中有效利用jqGrid实现分页和Excel导出功能，同时结合C#...

    jqgrid表格插件

    4. 分页：jqGrid内置了强大的分页功能，支持本地和远程分页，用户可以自定义每页显示的行数。 二、主要功能 1. 数据展示：jqGrid能展示大量数据，并提供排序、筛选和分页功能，提升用户体验。 2. 编辑功能：支持...

    JqGrid中文API文档

    JqGrid提供内置的分页功能，只需设置`rowNum`（每页行数）和`pager`（分页器ID）。例如： ```javascript pager: '#pager', rowNum: 10, ``` 同时，可以使用`loadonce: true`实现客户端分页，减少服务器压力。 五、...

    jqGrid：四、 remote data(JSON)

    总结来说，jqGrid通过JSON格式与远程服务器进行数据交互，提供了丰富的功能，如分页、排序和搜索，使得在Web应用中展示和管理大量数据变得简单高效。通过适当的配置和服务器配合，我们可以构建出高度交互和动态的...

    jqGrid详解及高级应用

    4. 通过JSON字符串数据获取：直接在jqGrid中处理JSON格式的字符串数据。 此外，jqGrid还支持扩展方式获取数据，例如ArrayData方式直接提供数组数据，或者通过DataType指定一个特定的Function来加载数据。 在实际...

    asp.net jqgrid例子

    jqGrid提供了一个灵活的表格，支持分页、排序、搜索等功能，而且能够通过AJAX从服务器获取数据。在ASP.NET中，我们通常会创建一个ASPX页面作为前端，一个ASHX或ASPX处理程序作为后端，用于处理数据请求和返回JSON...

    jqgrid+ajax

    &lt;table id="jqGrid"&gt;&lt;/table&gt; &lt;div id="jqGridPager"&gt;&lt;/div&gt; $(document).ready(function () { $("#jqGrid").jqGrid({ url: 'Handler.ashx', // 设置AJAX数据源 datatype: 'json', mtype: 'POST', ...

    jquery.jqgrid最新版

    &lt;table id="jqGrid"&gt;&lt;/table&gt; &lt;div id="jqGridPager"&gt;&lt;/div&gt; ``` 2. 初始化jqGrid：通过JavaScript代码设置参数，调用jqGrid方法进行初始化。 ```javascript $("#jqGrid").jqGrid({ url: 'data.json', // 数据源 ...

    ASP.NET中使用jQGrid

    &lt;table id="jqGrid"&gt;&lt;/table&gt; &lt;div id="jqGridPager"&gt;&lt;/div&gt; ``` 至此，一个基本的jQGrid已经设置完成。但jQGrid的功能远不止于此，它支持自定义编辑器、行操作按钮、列过滤、列固定、导出数据等多种高级特性。你...

    jqGrid的自适应表格

    接着，定义一个空的`&lt;table&gt;`元素作为jqGrid的容器。 ```html &lt;table id="myGrid"&gt;&lt;/table&gt; ``` 接下来，在JavaScript部分设置jqGrid的配置选项。这包括定义列模型、数据源以及自适应窗口大小的设定。例如： ```...

    JQGrid系列教程 代码

    JQGrid的分页功能通过`rowNum`和`rowList`设置每页显示的行数，`pager`参数指定分页控件的位置。默认情况下，JQGrid根据`sortname`和`sortorder`进行排序。 6. **搜索功能** JQGrid支持高级搜索，可以配置`...

    JQGRID 实例

    JQGrid内置了强大的分页功能，通过`rowNum`设置每页行数，`pager`定义分页器元素。分页参数还包括`loadonce`（一次性加载所有数据）和`gridview`（提高渲染速度）。 6. **排序**： 用户可以通过点击列头进行排序...

Magicbox
Global site tag (gtag.js) - Google Analytics