【JQGRID DOCUMENTATION】.学习笔记.1.安装jqGrid

前面介绍了怎么使用其MVC方式，很好用。不过，觉得还是只使用前段比较好。

1.1 如何安装

到http://www.trirand.com/blog/?page_id=6 下载。

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 2 < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" > 3 < head > 4 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> 5 < meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> 6 < title > My First Grid </ title > 7 8 < link rel ="stylesheet" type ="text/css" media ="screen" href ="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> 9 < link rel ="stylesheet" type ="text/css" media ="screen" href ="css/ui.jqgrid.css" /> 10 11 < script src ="js/jquery-1.4.2.min.js" type ="text/javascript" ></ script > 12 < script src ="js/i18n/grid.locale-en.js" type ="text/javascript" ></ script > 13 < script src ="js/jquery.jqGrid.min.js" type ="text/javascript" ></ script > 14 15 </ head > 16 < body > 17 ... 18 </ body > 19 </ html >

需要按以下顺序，

链接jQuery UI的的CSS文件，然后jqGrid的CSS文件。

然后引用jQuery脚本文件，i18n脚本文件，jqGrid脚本文件。

2 了解他是如何工作的

理解jqGrid是如何工作的，会帮助你掌握插件的全部功能。要理解的第一件事情，是列表数据的两个方面：

• 客户端表现
• 服务端操作

JqGrid是使得web浏览器grid容易操作的列表数据组件。它使用Ajax，调用取回信息，并使用jqGrid Column Model（colModel）构建列表数据的表现。

此外，jqGrid帮助你，发送任何数据变化，或附加服务端的数据库，一个被称作服务端操作的处理，或SSM。

SSM是指服务器处理实际的变化，更新到数据库，而不是通过用户的浏览器。SSM不是web页面中可见的东西。服务端数据变更使用PHP，或其他任何公共编程语言。

一个jqGrid包含以下四个部分：

• Caption layer 包含grid的公共信息
• Header layer 包含列的信息：label，width
• Body layer 从服务器请求的数据，在column model中显示关联的设置
• Navigation layer 包含被请求数据的附加信息，和请求一小片信息的动作。Navigation layer不仅仅能显示在grid的bottom，可以在页面的任何地方。它上面也能加按钮和链接，如editing，deleting，adding，searching。

Grid最小的数据表现，是Header layer和Body layer。

为了自由和灵活性，和总是更好的印象，jqGrid依赖CSS来显示。

3 第一个Grid

为了jqGrid，我们需要遵循下面三个事情

1. 一个有样本数据的数据库
2. 一个显示data的HTML页面
3. 一个服务端组件，扮演web页面和数据库之间的接口

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2 < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" > 3 < head > 4 < title > My First Grid </ title > 5 < link href ="Content/themes/base/jquery-ui.css" rel ="stylesheet" type ="text/css" /> 6 < link href ="Content/themes/ui.jqgrid.css" rel ="stylesheet" type ="text/css" /> 7 < style type ="text/css" > 8 html, body { 9 margin : 0 ; 10 padding : 0 ; 11 font-size : 75% ; 12 } 13 </ style > 14 < script src ="Scripts/jquery-1.4.4.min.js" type ="text/javascript" ></ script > 15 < script src ="Scripts/grid.locale-cn.js" type ="text/javascript" ></ script > 16 < script src ="Scripts/jquery.jqGrid.min.js" type ="text/javascript" ></ script > 17 </ head > 18 < body > 19 < table id ="list" > 20 < tr >< td ></ td ></ tr > 21 </ table > 22 < div id ="pager" ></ div > 23 < script > 24 $( function () { 25 $( " #list " ).jqGrid({ 26 url: " /Grid/List " , 27 datatype: " JSON " , 28 mtype: " GET " , 29 colNames: [ " OrderID " , " CustomerID " , " EmployeeID " , " OrderDate " , " RequiredDate " , " ShippedDate " , " ShipVia " , " Freight " , " ShipName " , " ShipAddress " , " ShipCity " , " ShipCountry " ], 30 colModel: [ 31 { name: " OrderID " , width: 55 }, 32 { name: " CustomerID " , width: 55 }, 33 { name: " EmployeeID " , width: 55 }, 34 { name: " OrderDate " , width: 55 }, 35 { name: " RequiredDate " , width: 55 }, 36 { name: " ShippedDate " , width: 55 }, 37 { name: " ShipVia " , width: 55 }, 38 { name: " Freight " , width: 55 }, 39 { name: " ShipName " , width: 55 }, 40 { name: " ShipAddress " , width: 55 }, 41 { name: " ShipCity " , width: 55 }, 42 { name: " ShipCountry " , width: 55 } 43 ], 44 pager: " #pager " , 45 rowNum: 10 , 46 rowList: [ 10 , 20 , 30 ], 47 sortname: "" , 48 sortorder: " desc " , 49 viewrecords: true , 50 gridview: true , 51 autoencode: true , 52 caption: " My First Grid " 53 }); 54 }) 55 </ script > 56 </ body > 57 </ html > 58

服务端代码：

1 public ActionResult List() 2 { 3 decimal page = Int32.Parse( Request.Params[ " page " ].ToString()); 4 5 decimal rows = Int32.Parse( Request.Params[ " rows " ].ToString()); 6 7 string sidx = Request.Params[ " sidx " ].ToString(); 8 9 string sord = Request.Params[ " sord " ].ToString(); 10 11 decimal count = repository.Orders.Count(); 12 13 decimal totalPage = Math.Floor(count / rows); 14 15 int skip = ( int )(rows * (page - 1 )); 16 17 var orders = (from m in repository.Orders.OrderByDescending(o => o.OrderID).Skip(skip).Take(( int )rows) 18 select new 19 { 20 OrderID = m.OrderID, 21 CustomerID = m.CustomerID, 22 EmployeeID = m.EmployeeID, 23 OrderDate = m.OrderDate, 24 RequiredDate = m.RequiredDate, 25 ShippedDate = m.ShippedDate, 26 ShipVia = m.ShipVia, 27 Freight = m.Freight, 28 ShipName = m.ShipName, 29 // ShipCity=m.ShipCity, 30 // ShipRegion=m.ShipRegion, 31 // ShipPostalCode=m.ShipPostalCode, 32 ShipCountry = m.ShipCountry 33 }).ToList(); 34 35 object response = new { 36 page = page, 37 total = totalPage, 38 records = count, 39 rows = orders 40 }; 41 return Json(response, JsonRequestBehavior.AllowGet); 42 }

Property	Description
url	告诉我们去哪取得数据。代表性的是服务端从数据库取得相应。
datatype	告诉jgGrid，返回信息的类型，让jgGrid构建它。
mtype	告诉我们如何做Ajax请求：Get或POST。
colNames	一组列名。会显示在grid的head上。
colModel	描述列模型的数组。这是gird最重要的一部分。常用的 name：列名，不必和数据库中一样。 index：传递给服务器用来分类排序的名字。我们也可以传递列数。一般地，这是数据库中的名字，用来服务端排序。 width：列的宽度，单位是像素。 align：列的对齐方式。 sortable：指定列中的数据可以被排序。如果false，点击header没有效果。
pager	定义一个pager bar来导航记录。它可以放在任何地方。
rowNum	设置grid中显示的行数。这个参数会传递给URL，从服务器取回数据
rowList	一个数组，构建一个select box元素，可以改变可视行数。在运行期间改变这个值，会替换rowNum参数
sortname	设置初始化的排序列。可以是一个名字或数字。这个参数会附加到URL上。
viewrecords	定义是否我们在pager bar上显示查询的总记录数
caption	设置grid的主题。如果这个参数没有设置，则不显示。

服务端返回的XML数据格式中：

1 <? xml version ="1.0" encoding="utf-8" ?> 2 < rows > 3 < page > </ page > 4 < total > </ total > 5 < records > </ records > 6 < row id = 'unique_rowid'> 7 <cell > cellcontent </ cell > 8 < cell > <![CDATA[ <font color='red'>cell</font> content ]]> </ cell > 9 … 10 </ row > 11 < row id = 'unique_rowid'> 12 <cell > cellcontent </ cell > 13 < cell > <![CDATA[ <font color='red'>cell</font> content ]]> </ cell > 14 … 15 </ row > 16 … 17 </ rows >

Tag	Description
rows	grid的跟标签
page	被请求的页数
total	查询的总页数
records	查询的总条数
row	grid中特别的行
cell	实际的数据。CDATA可以被使用。这种方式可以添加图片，链接和check boxes。

每行的cell tags个数，必须等于定义在colModel中的cells个数。row tags中的id属性，如果这个属性被忽略了，jgGrid会有两种方式处理这个独一无二的id：如果colModel中该属性设置了key，jqGrid会指派列的值到这行的id。不然，jqGrid会基于row的顺序设定id。

如果使用一个与内容无关的primary key来标识数据行，那么grid的可视单元格不包含这个值。