Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

 因为内容比较多，所以每篇讲解一些内容，最后会放出全部代码，可以参考。操作中总会遇到各式各样的问题，个人对部分问题的研究在最后一篇 问题研究 里。欢迎大家探讨学习。

代码都经过个人测试，但仍可能有各种未考虑到问题，欢迎提出。

 

精通可能夸张了些，但估计能解决使用过程中遇到的大部分问题。

 

这一篇为 JQGrid 简单介绍及系列文章索引。

 

系列索引

Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

Web jquery表格组件 JQGrid 的使用 - 全部代码

Web jquery表格组件 JQGrid 的使用 - 11.问题研究

 

JQGrid导出Excel文件

 

 

目录

1.说明

2.JQGrid简介

3.安装

 

1.说明

最近在使用JQGRID，所以进行了一些研究，这个系列博文就是研究成果。以代码为主，说明为辅，请在调试中理解，再多的文字描述比不上几行代码的实现。

 

2.JQGrid简介

JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。

JQGrid Demo 是一个在线的演示项目。在这里，可以知道jqgrid可以做什么事情。

 

使用场景：

数据多且杂时，如果想要给表格数据的显示增加方便的查询/删选功能。

JqGrid免费，开源，使用方便，是一个不错的选择。

 

JqGrid的一些说明

·         外观时髦，功能齐全

·         JS控件，用来显示和操作表格数据

·         使用AJAX方式

·         可以被集成到任何服务器端技术，例如ASP, JavaServelets, JSP, PHP 等等.

·         由Trirand公司Tony Tomov开发.

·         和ASP.NET集成非常简单

 

3.安装

新建一个ASP.NET Web 应用程序，选择web form方式即可。新建一个web页面JQGrid.aspx，设为起始页。

 

因为jqGrid依赖于jQuery ，所以要下载并引入。从下面网址下载最新的或使用已有的即可。

http://jqueryui.com/download/#!

http://jquery.com/download/

 

项目新建一个JQGrid文件夹，此文件夹下只存储js和css相关文件。实际项目当然不会这么用，此处仅为示例。

添加jQuery文件。

<script src="JQGrid/jquery-1.11.1.min.js"></script>

<link href="JQGrid/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet" />

 

这样jQuery的东西就准备好了。

下面再开始逐个添加我们JqGrid文件。

从这里下载吧 https://github.com/tonytomov/jqGrid/tree/master

<link href="JQGrid/ui.jqgrid.css" rel="stylesheet" />

<script src="JQGrid/grid.locale-cn.js"></script>

<script src="JQGrid/jquery.jqGrid.js"></script>

 

 

注意JqGrid文件引用必须在jQuery引用的下方。

 

效果图：

 

参考及致谢

http://www.cnblogs.com/cobble19/archive/2013/02/05/2892894.html

http://www.trirand.com/jqgridwiki/doku.php?id=start

http://www.trirand.com/blog/jqgrid/jqgrid.html

http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET

http://www.cnblogs.com/miro/p/jqGrid.html

http://blog.csdn.net/feiying008/article/details/38036729