【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 new19 { 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的可视单元格不包含这个值。

posted @ 2013-09-07 22:25  Reinhard_Hsu  阅读(275)  评论(0)  编辑  收藏  举报