`
mushme
  • 浏览: 789314 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jqgrid学习记录，从外部url获取json数据

jsonjQueryJSPHTMLUI 
阅读更多
从http://a3mao.iteye.com学习，自己做了个简单的例子，mark下，以后方便查找
1.前台显示页面，包含了配置的完整注释 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>base.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="/scripts/jQuery/jquery-1.3.2.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" media="screen" href="/styles/themes/redmond/jquery-ui-1.7.2.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="/styles/themes/ui.jqgrid.css" />
	<script type="text/javascript" src="/scripts/jQuery/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="/scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript" src="/scripts/jQuery/plugins/grid.locale-zh_CN.js"></script>
	<script type="text/javascript" src="/scripts/jQuery/plugins/jquery.jqGrid.min.js"></script>
	<style>
	<!-- jquery-ui的字体大小与jqgrid字体大小不一致，故需要在页面上在加此style来指定页面上文字大小 -->
		html, body {  
	    margin: 0;  
	    padding: 0;  
	    font-size: 75%;  
	}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){      
		jQuery("#jsonTable").jqGrid({	//jsonTable为页面中需要显示内容的table的id
		url:'/study/json-data.jsp',	//生成json数据的url源
     	datatype: 'json',    //从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
     	colNames:['编号','姓名','密码','年龄','地址','出生日期'],		//表格的显示字段
		colModel:[    
        {name:'id',index:'id', width:90,sorttype:"int"},    //name表格列的名称,index排序时字段的索引,width只能是像素，不能是百分比
        {name:'username',index:'name', width:110,sorttype:"int"},    
		{name:'password',index:'password', width:80},    
        {name:'age',index:'age', width:80},      
        {name:'address',index:'address', width:80},     
        {name:'time',index:'time', width:80,sorttype:"date"}      
     	],    
		rowNum:10,	//在grid上显示记录条数，也就是pageSize，这个参数是要被传递到后台
    	rowList:[10,20,30],	//用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
    	pager: "datapager",	//datapager为显示页码的div
           
		multiselect: false,	//是否可多选，多选的话前面有多选框    
		sortname: 'id',    //默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台
		viewrecords: true,	//是否显示记录总数
		sortorder: "desc",    
		cellEdit:false,	//是否可以编辑表格
		lastpage:20,	//
		caption: "第一个表格",	//表格名称
		height: 220,
		jsonReader: {    //jsonReader来跟服务器端返回的数据做对应
			root: "dataRows",  //包含实际数据的数组
			page: "currPage",  //当前页
     		total: "totalPage",//总页数
     		records:"totalCount", //查询出的记录数
        	repeatitems : false    
     	},
		
		onSelectRow: function(id){   
			alert("第"+id+"行被选中");  
		},
		
		onPaging:function(){
			alert("翻页键被按下");
		}
   
		}).navGrid('datapager',  
                {view:true,edit:true,add:false,del:false},  
                {closeOnEscape:true}
                
    );   
             
});   
</script>  
   
</head>  
<body>  
<table id="jsonTable"></table>     
<div id="datapager"></div>     
     
</body>  
</html>

2.生成数据的jsp 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
StringBuffer sb=new StringBuffer();
sb.append("{totalPage:18,currPage:3,totalCount:300,'dataRows':[{'password':'123','age':20,'address':'USA','username':'王三','id':0},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,'address':'USA','username':'王三','id':2}");

sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':11},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':12},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':13},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':14},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':15},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':16},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,'address':'USA','username':'王三','id':2}");

sb.append("],'rows':10}");
out.print(sb.toString());
%>


jsonreader的几处关键配置说明，注释中已经标识，此处再说明下 
jsonReader: {    //jsonReader来跟服务器端返回的数据做对应
	root: "dataRows",  //包含实际数据的数组
	page: "currPage",  //当前页
	total: "totalPage",//总页数
	records:"totalCount", //查询出的记录数
	repeatitems : false    
}

整个项目已经打包上传到附件。时间：20120701
内容已更新，时间：20120710
分享到：
| jqgrid做表格
评论
3 楼 mushme 2012-07-01  
mushme 写道
wlsuger 写道
你好，感谢分享，但是你发的例子怎么跑不起来呢 报44行错误

此内容包含的js引用较多，代码是可用的，我再找找源文件，打包上来。


整个项目已经打包上传到附件，可以直接导入eclipse中使用。
2 楼 mushme 2012-06-13  
wlsuger 写道
你好，感谢分享，但是你发的例子怎么跑不起来呢 报44行错误

此内容包含的js引用较多，代码是可用的，我再找找源文件，打包上来。
1 楼 wlsuger 2012-06-13  
你好，感谢分享，但是你发的例子怎么跑不起来呢 报44行错误
发表评论

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

相关推荐

    JqGrid 纯Json自带分页功能

    为了在JqGrid中实现自动分页，你需要在初始化JqGrid时设置相关的参数，如`datatype`（数据类型）、`url`（数据来源URL）、`pager`（分页控件ID）和`loadonce`（是否一次性加载所有数据）。例如： ```javascript $(...

    jqGrid：四、 remote data(JSON)

    在远程数据（remote data）模式下，jqGrid能够从服务器获取JSON格式的数据，然后动态地填充表格。这一特性使得jqGrid适用于大数据量的展示，同时减轻了客户端的负担。 ### JSON 数据格式 JSON（JavaScript Object ...

    JqGrid Demo json

    同时，使用`url`参数指定获取数据的服务器端接口，并通过`datatype`设置数据类型为'json'。 接下来，我们来看看Struts2框架的角色。Struts2是一个流行的Java Web开发框架，它简化了MVC（模型-视图-控制器）架构的...

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    通过配置URL和数据类型，你可以轻松地从服务器获取并显示数据。同时，它支持本地数据加载，方便离线或小规模的数据展示。 其次，jqGrid提供了丰富的列设置选项，可以自定义列的标题、宽度、对齐方式，甚至可以设置...

    MVC4+JQGRID_SubGrid+JSTREE+JSON(DEMO)

    这个DEMO对于学习和理解如何在C# MVC4环境中集成JQGRID、SubGrid、JSTREE和JSON数据交换是一个很好的实践案例。开发者可以通过研究这些代码来了解如何有效地处理和展示复杂数据，以及如何在Web应用中实现交互式数据...

    获取jqGrid中选择的行的数据

    下面可以获取选择一行的id，如果你选择多行，那下面的id是最后选择的行的id： ...如果想获取选择的行的数据，只要传入rowId即可，如下： var rowData = $(“#gridTable”).jqGrid(‘getRowData',rowId);

    ASP 使用jqGrid实现读写删的代码(json)

    jqGrid是一个优秀的基于jQuery的DataGrid框架，想必大伙儿也不陌生，网上基于ASP的资料很少，我提供一个，数据格式是json的： 、一个针对jqGrid的json类：这段代码似乎是由官网论坛的一些PHP中转化而来，我们存为...

    jqgrid本地数据分页

    本地数据分页是指在客户端进行数据的分页处理，而不是将所有数据一次性从服务器获取。这种模式适用于数据量不大，或者对实时性要求不高的场景。在jqGrid中，本地数据分页可以通过设置`datatype`为`local`来实现。...

    jqgrid加载本地数据并且分页例子

    在这个"jqgrid加载本地数据并且分页例子"中，我们将深入探讨如何利用jqGrid实现从本地数据源加载数据并进行分页显示。 首先，要理解jqGrid的工作原理。它基于jQuery库，通过HTML表格元素来渲染数据，并通过AJAX从...

    jqGrid数据调用实例

    这些文件通常可以从jqGrid官方网站或者CDN服务获取。确保引入了核心的jQuery库、jqGrid主文件和主题样式表。 ```html &lt;!DOCTYPE html&gt; &lt;link rel="stylesheet" type="text/css" href="path/to/ui.jqgrid.css" /&gt;...

    JQuery Mobile 中实现 jqGrid 数据分组

    url: 'data.json', // 数据源，可以是JSON格式的URL datatype: 'json', colModel: [ // 列定义 { name: 'id', index: 'id', width: 50, groupable: true }, { name: 'name', index: 'name', width: 100, ...

    jqgrid学习笔记

    - **url**: 定义获取数据的服务器端地址。 - **datatype**: 指定从服务器返回的数据类型，如 xml、json 等。 - **mtype**: 设置 AJAX 请求的方式，通常是 POST 或 GET。 - 其他参数还包括 `colModel`（定义列的...

    jqGrid详解及高级应用

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

    jqGrid表格数据展示插件

    url: "data.json", // 数据源 datatype: "json", // 数据类型 colNames: ["ID", "Name", "Age"], // 列名 colModel: [ // 列定义 { name: "id", index: "id", width: 50 }, { name: "name", index: "name", ...

    jqgrid 导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG，PDF格式

    例如，使用 `exportToExcel` 函数可以导出到 Excel，`toDataURL` 方法可以生成图片数据URL，而 `toXMLString` 或 `toJSONString` 分别用于生成 XML 和 JSON 字符串。开发者可以根据实际需求调整导出的列、样式、数据...

    jqgrid分页参数

    其中，`jqGrid`是一款非常受欢迎的jQuery插件，它能够帮助开发者快速地在网页上实现表格数据的展示，并提供了丰富的功能，如排序、搜索、分页等。本文将重点介绍`jqGrid`中的分页参数及其具体用法。 #### 二、...

    jqGrid 4.1 示例（一）

    在客户端，我们需要配置jqGrid的`url`参数指向WCF服务的URL，`dataType`参数设置为'json'，这样jqGrid就知道从服务器接收的是JSON数据。然后在接收到数据后，通过调用`addJSONData`方法，将数据插入到表格中。 以下...

    JqGrid中文API文档

    `datatype`参数决定了数据获取方式。例如，使用AJAX从服务器获取JSON数据，设置`datatype: 'json'`，`url`参数指定服务器接口地址。 三、列模型（ColModel） `colModel`是JqGrid最重要的配置之一，它定义了表格的...

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