【jqGrid for ASP.NET MVC Documentation】.学习笔记.1.介绍

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 >