应用中经常会遇到向用户展示信息的情况。我们可以自己通过<table>标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。
在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和jqGrid。不过flexGrid网上的资料很少，官方文档不全。而jqGrid的官方文档却相当的全面。官方文档网址：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs。
学习任何一项技术，第一个例子相当的重要，如果第一个例子都不能运行成功，那接下来的学习将是相当的困难，甚至没法进行下去。所以，在此先实现第一个例子，希望对刚刚接触jqGrid的人有所帮助。
jqGrid获得数据的方式有多种，包括xml和JSON等。第一个例子，我使用了更简单的方式，即Array方式。之后的例子会用json从服务器端获得数据。本例子没有从跟后台交互。
本例子的效果如下：
列出关键代码：
html代码:
<link id="uiThemes" 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" />
<!-- 引入jQuery -->
<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
<script src="scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="scripts/jQuery/plugins/grid.locale-zh_CN.js" type="text/javascript"></script>
<script src="scripts/jQuery/plugins/jquery.jqGrid.min.js" type="text/javascript"></script>
...
<body>
<table id="gridTable"></table>
<div id="gridPager"></div>
</body>
因为jqGrid3.6集成了jQuery UI，所以，此处需要导入UI相关js和css。另外，grid.locale-zh_CN.js这个国际化文件是自己翻译的，因为官方网站没有中文的国际化文件（官方提供了很多中语言的国际化文件，但是没有提供中文的，什么意思嘛！）。另外，这个文件必须在jquery.jqGrid.min.js之前导入，否则会出问题。
javascript代码：
$(function()
{
$("#gridTable").jqGrid({
datatype: "local",
height: 250,
colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:10,
rowList:[10,20,30],
pager:"#gridPager",
caption: "第一个jqGrid例子"
}).navGrid('#pager2',{edit:false,add:false,del:false});
var mydata = [
{id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
{id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
{id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
{id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
{id:"5",userName:"赵钱",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
{id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
{id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
{id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
{id:"9",userName:"孙先",gender:"男",email:"76454533@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
});
可以看出，jqGrid的使用是：$("#tableId").jqGrid(optional);其中，optional是一个对象，有很多属性，具体什么含义，怎么配置，之后的文章我会介绍，也可以在官方网站找到详细的介绍。
jsp/Servlet集成jqGrid、Struts2集成jqGrid请关注本人之后的博客文章。
- 大小: 52 KB
分享到：
相关推荐
jqGrid是一款基于jQuery的开源表格插件，专为数据管理和展示设计，提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点： 1. **基本使用**：...
在"jqGrid表格应用——新增与删除数据"这个主题中，我们可以探讨以下知识点： 1. **jqGrid的基本结构**：jqGrid的HTML结构通常包括一个`<table>`元素，以及必要的CSS和JavaScript引用。例如，`index.html`可能包含`...
这款插件是jQuery库的一个扩展，专为处理大量数据和实现复杂的表格功能而设计。在本文中，我们将深入探讨jqGrid的主要特性、使用方法以及如何在项目中集成和定制。 ### 一、主要特性 1. **数据展示**：jqGrid可以...
通过学习这个jqGrid的第一个Demo，你可以掌握基本的表格展示、数据操作和界面交互。随着对jqGrid更深入的理解，你会发现它能帮助你构建功能丰富的Web数据管理应用。参考博文中的示例代码，动手实践，将有助于更好地...
总之，jqGrid 4.3.0作为一个功能齐全、性能优良的jQuery表格插件，是开发数据密集型Web应用的理想选择。无论是基础的表格展示还是复杂的交互功能，它都能提供完整的解决方案，大大简化开发过程。通过深入学习和实践...
这个"jqGrid（jqueryGrid表格操作demo）"是一个示例项目，用于演示如何在Visual Studio 2010环境下使用jqGrid实现类似Excel的表格操作。 首先，jqGrid的核心特性包括： 1. 数据加载：它可以动态地从服务器获取数据...
jqGrid是一款功能强大的JavaScript表格插件，用于在Web应用程序中展示和操作数据。它支持多种功能，如数据分页、排序、过滤、编辑和 AJAX 交互。这款插件基于 jQuery 库，使得开发者能够轻松地在网页上创建交互式、...
JqGrid是一款强大的JavaScript表格插件，用于在Web应用程序中展示和操作数据。它基于jQuery库，提供了丰富的功能，如数据排序、筛选、分页、编辑、添加、删除和保存等，极大地增强了网页中表格的交互性和数据管理...
jqGrid是一款功能强大的JavaScript表格插件，主要用于在Web应用中展示和操作数据。它基于jQuery库，提供了丰富的功能，如数据排序、分页、搜索、编辑等，支持JSON、XML、CSV等多种数据格式，适用于创建复杂的网格...
jqGrid是一款功能强大的JavaScript表格插件，主要用于在Web页面中展示和操作数据。它基于jQuery库，提供了丰富的功能，如数据排序、分页、搜索、编辑等，使得开发者能够轻松创建交互式的表格。本篇文章将深入探讨...
jqGrid是一款基于jQuery的开源数据网格插件，用于在网页上展示和操作表格数据。它在Web开发领域中被广泛使用，特别是在需要处理大量结构化数据的场景下。jqGrid 3.5版本是该插件的一个较早版本，但仍然具有丰富的...
**jqGrid jQuery 表格插件** jqGrid是一款基于jQuery的开源数据网格插件，它为Web应用程序提供了强大的数据展示和管理能力。这个插件深受开发者喜爱，因为它提供了丰富的功能和自定义选项，使得在网页上创建交互式...
从给定的文件信息来看，这是一段网页代码示例，主要展示了如何在网页中集成jQuery UI Tabs和jqGrid插件。以下是对标题、描述、标签以及部分内容中涉及的关键知识点的详细解读： ### 关键知识点：jQuery UI Tabs **...
jqGrid 是一个强大的 jQuery 插件，用于在网页上创建、操作和展示数据表格。它提供了丰富的功能，如数据分页、排序、过滤、编辑和更多。本资源为 jqGrid5.X 的官方全Demo下载，包含中文文档和离线演示，用户可以在...
这款开源插件基于jQuery库，提供了一系列高级功能，如分页、排序、筛选、编辑、添加和删除数据等。在"jqGrid表格内容查询读取代码.zip"压缩包中，我们可以找到实现jqGrid表格内容查询读取的相关代码。 首先，让我们...
jqGrid 是一个基于jQuery的开源数据网格插件，主要用于展示和操作大量结构化数据。它提供了分页、排序、过滤、编辑、添加和删除等功能，支持Ajax数据加载，可以轻松地与服务器端的数据源进行交互。jqGrid还可以...
jqGrid是一款基于JavaScript的开源数据网格组件，它是jQuery库的一部分，用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性，深受开发者的喜爱。它允许用户进行...
jqGrid是一款基于jQuery的表格插件，它提供了一套强大的功能，如数据分页、排序、搜索和编辑。jqGrid支持AJAX无刷新加载，使得用户可以在不刷新整个页面的情况下，进行数据的增删改查操作，提高了用户体验。此外，...
《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件，主要用于构建数据密集型Web应用程序，特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...