一 数据来自本地(客户端)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
var data=[
{id:1,name:"xiao",birthday:"2012-12-12"},
{id:2,name:"xiao",birthday:"2012-12-12"},
{id:3,name:"xiao",birthday:"2012-12-12"},
{id:4,name:"xiao",birthday:"2012-12-12"},
{id:5,name:"xiao",birthday:"2012-12-12"},
{id:6,name:"xiao",birthday:"2012-12-12"},
{id:7,name:"xiao",birthday:"2012-12-12"},
{id:8,name:"xiao",birthday:"2012-12-12"},
{id:9,name:"xiao",birthday:"2012-12-12"},
{id:10,name:"xiao",birthday:"2012-12-12"},
];// the native data
$(function(){
$("#list").jqGrid({
datatype: "local",// specify the data from local
data:data,// the data which will be displayed
colNames:["ID","NAME", "BIRTHDAY"],// the column header names
colModel :[
{name:"id", index:"id", width:100},
{name:"name", index:"name", width:100},
{name:"birthday", index:"birthday", width:100, sortable:false},
],// the column discription
pager: "#pager",// specify the pager bar
rowNum:10, // sets how many records we want to view in the grid
// An array to construct a select box element in the pager
// in which we can change the number of the visible rows.
rowList:[10,20,30],
// add the new column which counts the number of available rows
rownumbers:true,
// the column according to which the data is to be sorted
// when it is initially loaded
sortname: "id",
sortorder: "desc", // the initial sorting order
// view the beginning and ending record number in the grid
viewrecords: true,
gridview: true,
caption: "native grid",
width:500,
height:200,
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>
二 数据源来自服务器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var result=null;
$("#list").jqGrid({
datatype: "json", // specify the data in json format
// specify the url of the file that returns
// the data needed to populate the grid
url:"/JavaWeb/JSONServlet",
// an array which describes the structure of the expected json data
jsonReader:{ repeatitems: false },
colNames:["ID","NAME", "BIRTHDAY"],// the column header names
colModel :[
{name:"id", index:"id", width:100},
{name:"name", index:"name", width:100},
{name:"birthday", index:"birthday", width:100, sortable:false},
],// the column discription
pager: "#pager",// specify the pager bar
rowNum:10, // sets how many records we want to view in the grid
// An array to construct a select box element in the pager
// in which we can change the number of the visible rows.
rowList:[10,20,30],
// add the new column which counts the number of available rows
rownumbers:true,
// the column according to which the data is to be sorted
// when it is initially loaded
sortname: "id",
sortorder: "desc", // the initial sorting order
// view the beginning and ending record number in the grid
viewrecords: true,
gridview: true,
caption: "remote grid",
width:500,
height:200,
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>
Note:jsonReader可以不指定。它的默认设置如下：
jQuery("#gridid").jqGrid({
...
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {root:"rows",
repeatitems: true,
cell:"cell"
}
},
...
});
如果使用默认的jsonReader设置(repeatable:true)，jqGrid所期望的json格式是
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
| 标签 | 描述 |
| total | 返回的页面数量 |
| page | 要展现的当前页 |
| records | 返回的记录数量 |
| rows | 包含返回记录的数组 |
| id | 行的唯一标识符 |
| cell | 作为rows数组元素对象的一个属性包含返回记录数据的数组(与rows的区别在于:rows可包含除了真正的数据之外的其他属性) |
如果设置repeatable:false，则表明让jqGrid通过名字在json数据中搜索元素。
jqGrid期望的json返回格式如下:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "name" :"xiao","birthday":"2012-01-01"},
{"id" :"2", "name":"xiao","birthday":"2012-01-01"},
...
]
}
其中的id,name,birthday对应于colModel中jsonmap的name属性。
更多可参考
http://blog.csdn.net/hurryjiang/article/details/6891115
分享到：
相关推荐
此 demo 是一个学习 jqGrid 的良好起点。通过分析代码和尝试修改，你可以深入了解 jqGrid 的工作原理，并提升你在网页数据管理方面的技能。 通过这个 jqGrid 完整版 demo，开发者不仅可以学习到 jqGrid 的基本用法...
jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40，官网上面demo40下载下来是没法用的，因为里面有些东西是错的，当然我这个demo40还是还有是些不足，比喻说数据库中少表导致...
jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料。 jqGrid中文文档.doc------附加放在这里的其它资料。 jqGrid的使用.doc------附加放在这里的其它资料。
在“jqueryGridDemo jqGriddemo38”这个项目中，我们深入探讨jqGrid的使用方法，并通过一系列的示例代码来帮助理解其核心概念和功能。 首先，jqGrid的基础设置通常涉及HTML结构、CSS样式和JavaScript脚本。`jqgrid....
直接从官方网站上下载得到的...2 如果遇到Toolbar上 search按钮 放大镜图标 出现布局错误 遮罩把所有内容都遮住了 此时可以尝试将demo文件夹中的 themes目录下的 ui jqgrid css 文件 替换为源码包中的版本 或者替换成 ...
Jqgrid demo-史上最强大，没有之一， 为了大家能够更好的学习和使用Jqgrid网格插件，我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本...
** jqGrid MVC demo（含jqChart）详解** `jqGrid` 是一个强大的JavaScript库，用于在Web应用中展示和操作数据。它是一个基于jQuery的表格插件，提供了丰富的功能，如分页、排序、过滤、编辑和数据导出。在这个`MVC ...
**jqGridDemo** jqGrid是一款基于JavaScript的开源网格控件，用于在Web应用程序中展示和操作数据。这个"jqGridDemo"是根据官方网站提供的示例进行调试和优化后的版本，目的是为了便于个人学习和日后查阅。jqGrid以...
本资源“jqGrid_demo”包含了一个关于 jqGrid 使用的示例，帮助开发者了解如何在项目中集成和自定义这个功能丰富的表格插件。 1. **jqGrid 概述** jqGrid 是基于 jQuery 的开源数据网格组件，它支持多种数据源，如...
在"jqgrid demo"中，我们可以期待看到一个实际的应用实例，展示如何利用jqGrid的各种特性来构建高效的数据操作界面。 首先，jqGrid的分页功能是其核心特性之一，允许用户以页面的形式浏览大量的数据，而不是一次性...
在提供的`jqgrid_demo35`压缩包中，包含了多个示例文件，用于演示`jqGrid 3.5`的各种功能。以下是对每个文件及其可能涉及的知识点的详细说明： 1. **speed.html.bak**：这是一个备份的HTML文件，很可能包含了一个...
**JqGrid Demo json** 是一个基于Web的前端数据展示示例，它使用了JqGrid库和JSON数据格式来实现动态、交互式的表格。JqGrid是一个强大的jQuery插件，用于创建高度可定制和功能丰富的网格视图，广泛应用于数据管理和...
通过深入学习和实践“jqgriddemo”，不仅可以提升对jqGrid的理解，还能为实际项目开发积累宝贵经验。对于前端开发者而言，掌握jqGrid这样的数据网格组件，无疑会提高工作效率，为用户提供更优质的交互体验。
JqGrid是一款强大的JavaScript表格插件，用于在Web应用程序中展示和操作数据。...通过深入学习和实践"JqGrid插件+JqGridDemo+JqGrid主题"，开发者可以提升其在前端开发中的数据处理能力，创建出更富交互性的网页应用。
JQgrid的jsp demo，集成mysql Hibernate 测试demo，下载即用
示例代码（DEMO）是学习和理解jqGrid功能的关键，它们展示了如何实际应用jqGrid的各种特性。通过查看和运行DEMO，开发者能够快速上手，了解如何配置和使用jqGrid。 5. **DOC文档的价值** 提供的3.4版本DOC文档...
【jqGrid Servlet Demo】是一个基于Java的Web应用示例，它展示了如何在Servlet环境中使用jqGrid这个强大的jQuery插件来创建动态、交互式的表格。jqGrid是一个功能丰富的数据网格组件，能够处理大量的数据并提供排序...
**jQuery的jqGrid 3.2 SQL 2000版本 Demo详解** jQuery的jqGrid是一款功能强大的数据网格插件，适用于网页上展示和操作大量结构化的数据。它以其丰富的特性、灵活的配置和高效的性能在Web开发领域广泛应用。本项目...
JqGrid 在asp.net 中的demo。异步从服务器端或许json格式的数据。只是简单配置，复杂功能可查询文档配置。使用sql server 2005 数据库，开启数据库服务后，可直接运行default.aspx