前言：为什么要写它

　　相信看到这文章的小伙伴，大多和我一样，手里的项目用到过它。并且已经能够在开发新功能或者修改现有功能的时候照猫画虎的使用它，依然觉得对它不太了解，想更深入的了解它的，我就是抱着这么样的心态，来记录了我跟随官方文档学习的过程，希望对有同样需求的小伙伴有所帮助。

怎么定义jQuery.jqGrid

　　这个问题看起来很无聊的。jqGrid不就是负责把获得过来的信息以表格的形式展示到界面里的JS控件嘛。确实，这个控件就是负责干这事儿的。它官方的WIKI上是这么写的，汉字部份是来自度娘的翻译。

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

jqGrid是一个支持Ajax的JavaScript控件，它提供了在web上表示和操作表格数据的解决方案。由于网格是通过Ajax回调动态加载数据的客户端解决方案，因此它可以与任何服务器端技术集成，包括PHP、ASP、Java servlet、JSP、ColdFusion和Perl。

　　历史和背景就不说了，不考试的话，帮助不大。有几个重要版本更新的注意事项，在它官网上标注了。需要更新的小伙伴，建议去官网上确认一下。

怎么使用jQuery.jqGrid

jQuery.jqGrid需要哪些支持

　　从名字上就能看得出来，jQuery.jqGrid需要jQuery的支持。官方说要”jQuery library, version 1.3 or later“。另外，官方说还要”Your choice of a jQuery UI theme“。嗯，它说的是一个jQuery UI主题，所以在官方给的例子里，没有引用jquery-ui.js。

官方给的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>My First Grid</title> <!--Your choice of a jQuery UI theme--> <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> <!--jqGrid自身的样式表--> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <!--jQuery library, version 1.3 or later--> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <!--jqGrid的语言包--> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <!--jqGrid--> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> </head> <body> </body> </html>

官方给的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<!--Your choice of a jQuery UI theme-->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<!--jqGrid自身的样式表-->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<!--jQuery library, version 1.3 or later-->
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<!--jqGrid的语言包-->
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<!--jqGrid-->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

　　除了以上代码里提到的CSS文件和JS文件，还有一个images文件夹，是在下载的UI主题里自带的，是和jquery-ui-1.7.1.custom.css在同一目录下的，记着别漏下。

jQuery.jqGrid的工作环境

　　我是这么理解的，jqGrid生成的网格要指定输出到哪个容器，这个容器必须是个<table>容器，官网上说“The definition of the grid is done via the HTML tag <table>”，并且，一定要给它定义id属性，官网上也特意做了强调“The table should have an ID that is unique in the HTML document. In the example above, it is “#list”. This ID is important because you'll need it for grid functions. ”，此 ID 很重要，因为您将需要它来执行网格功能。“Cellspacing, cellpadding and border attributes are added by jqGrid and should not be included in the definition of your table.”，Cellspacing、cellpadding、border这些属性由jqGrid添加，不要在<table>标签里定义。随后的<div>标签，用来存放这个jqGrid的导航层的，可以放在HTML文档的任何位置，一般是紧随着<table>标签，并且必须有唯一的id。

<table id="list"></table>
<div id="pager"></div>

　　容器定义结束，接下来定义往容器里装什么内容。基本语法是："jQuery("#grid_id").jqGrid(options);"，官网上说jqGrid是一个javaScript object，具有属性、事件、方法，其中属性可以是字符串、数值、布尔值，甚至可以是其它对象。以下代码也是从官网上抄来的。

 $("#list").jqGrid({url: "example.php",//请求的后台地址datatype: "xml",//数据类型mtype: "GET",colNames: ["Inv No", "Date", "Amount", "Tax", "Total", "Notes"],//列名colModel: [{ name: "invid", width: 55 },{ name: "invdate", width: 90 },{ name: "amount", width: 80, align: "right" },{ name: "tax", width: 80, align: "right" },{ name: "total", width: 80, align: "right" },{ name: "note", width: 150, sortable: false }
//name:列名称，
//index:传递给服务器的，要对数据进行排序的名称
//width:宽度
//sortable:可排序的],pager: "#pager",//导航层的ID。rowNum: 10,rowList: [10, 20, 30],sortname: "invid",sortorder: "desc",viewrecords: true,gridview: true,autoencode: true,caption: "My first grid"});

　　比较基本语法来看，option指的是jqGrid()里用{}这一部份吧，关于option，官网给出了相对应的说明文档：wiki:options - jqGrid Wiki。

　　嗯。写到这儿，当然不算完，只是我想先去我的项目里实践一下。请期待我（可能）的更新。

jQuery.jqGrid相关推荐

JQuery.jqGrid()入门
jQuery("#grid_id").jqGrid({ //<table id="grid_id"></div>url: "U ...
jQuery学习笔记--JqGrid相关操作方法列表备忘重点讲解(超重要)
JqGrid相关操作备忘方法列表特别推荐:怎样获取某一方某一列的值: [html] view plaincopy var rowdata=jQuery("#list").jqG ...
Web jquery表格组件 JQGrid 的使用 - 从入门到精通开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇问题研究里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
jquery表格插件jqgrid
jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/ ...
jQuery学习笔记--JqGrid相关操作方法列表备忘重点讲解(超重要) from:jpr1990
JqGrid相关操作备忘方法列表 1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(js ...
JQuery 操作表格和JqGrid了解
登录 | 注册 mike_caoyong的专栏目录视图摘要视图订阅 CSDN日报20170322--<关于软件研发的一些体会总结> 同步博客至 CSDN ,让更多开发者看到你的 ...
给jqGrid数据行添加修改和删除操作链接
我这里用的不是jqGrid的自带的编辑和删除操作,我已经把分页导航栏下的编辑,删除,搜索都取消掉了,就是这句$("#list1").navGrid("#pager1&qu ...
jqgrid的函数与操作
jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身.jqGrid的方法有两种调用方式: $("#grid_id").jqGridMethod( parameter1, ...
jqGrid使用整理
jqGrid是一款处理表格展现的jQuery插件,支持分页.滚动加载.搜索.锁定.拖动等一系列对表格的常规操作.以下是最近项目中实践jqGrid的整理 1.引入到项目中来 jqGrid的主页在http ...

jQuery.jqGrid