1 介绍
jqGrid for ASP.NET MVC 是一个服务端组件。
- 专为MVC 分隔 model ,view , controller 的原则,完全观察者模式
- 非常快的速度 仅仅很少的必须的数据会从服务端发送到客户端,使用json
- 智能的数据源操作 1000000行,过滤和搜索,不用写代码就能实现。相应速度快
- 没有使用ViewState
- 最小的HTML尺寸 jqgrid 使用客户端 rendering ,它意味着没有大量的数据,使用HTML被嵌套在 <table> 中
- 基于jQuery 的客户端 基于jQuery的常见的和强大的API
- 完全的特性 任何你想要的特性,包括 分层(hierarchy),排序sorting,过滤,分页等。
- 主题编辑器的支持 使用主题编辑器,私人设计师设计的一组25个主题,完全的免费
2 系统必备
浏览器支持大多数主流浏览器
- Internet Explorer - 6+
- FireFox 3+
- Safari 2+
- Google Chrome 2+
- Opera 9.5+
jQuery 版本支持 1.3.2+ 。推荐使用最新的官方稳定版。
Visual Studio 支持 05,08,10
ASP.NET MVC Framework 支持 2.0
3 在项目上使用 jqGrid
包含三个文件夹,bin 文件夹包含组装的DLL。 themes 文件夹包含主题。任何jQuery UI ThemeRoller 做的主题都能用,你可以下载附加的主题。
要使用自带的 “Redmond” 主题,需要引用 themes 文件夹下的两个文件。ui-jqgrid.css 是唯一一个jqGrid 需要使用的CSS文件。将它加在你的主题文件后面引用。
1 <link rel="stylesheet" type="text/css" href="themes/redmond/jquery-ui-1.7.1.custom.css"/>2 <link rel="stylesheet" type="text/css" href="themes/ui.jqgrid.css"/>
js 文件夹,是jqGrid必须的脚本。按一下顺序引用
jquery-1.3.2.min.js
i18n 本地化语言
jquery.jqGrid.min.js
完全引用后的页面像这样
1 %@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<JQGridMVCExamples.Models.OrdersJqGridModel>" %> 2 <%@ Import Namespace="Trirand.Web.Mvc"%> 3 <%@ Import Namespace="JQGridMVCExamples.Models"%> 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 7 <html xmlns="http://www.w3.org/1999/xhtml"> 8 <head id="Head1" runat="server"> 9 <title>Performance Linq</title>10 <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/jquery-1.3.2.min.js"></script>11 <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/jqgrid/i18n/grid.locale-en.js"></script>12 <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/jqgrid/jquery.jqGrid.min.js"></script>13 <link rel="stylesheet" type="text/css" href="http://www.trirand.net/aspnetmvc/Content/themes/redmond/jquery-ui-1.7.1.custom.css"/>14 <link rel="stylesheet" type="text/css" href="http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css"/>15 </head>16 <body>17 <div>18 <%= Html.Trirand().JQGrid(Model.OrdersGrid, "JQGrid1") %>19 </div>20 <br /><br />21 <div>22 <% Html.RenderPartial("CodeTabs"); %>23 </div>24 25 </body>26 </html>