前言
数据显示的方式可以通过很多控件来实现，例如服务端的原生GridView，第三方控件ComponentArt、Telerik等，客户端的flexgrid, extgrid, easyui, jqgrid等等。在这里我要讲解的是jqgrid，它也是我最近在项目中尝试用到的。
我选择使用jqgrid主要是因为它基于jquery ui，在没有美工、契合系统主题并且快速完成系统的前提下，我选择了可以定制theme的jquery ui.
这篇文章主要涉及到jquery ui和jqgrid的使用，我对每一步的讲解都尽量做到细化，结合详细的截图，http://beizhu.81nanchang.cn 以期能够通过step by step让初学者们熟悉一些原理和实现步骤。
文中涉及到一些其他知识点，也做了较为详细的说明，希望这些
内容
财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容
能够对web开发者们有较好的增益作用。
每一个页面的在线demo我还在配置中，一会儿放出来，可以让大家有个直观的感受。
在开始项目之前，需要做的一些准备我也会逐步在下面的内容中进行介绍，或者你可以直接在这里下载本文所有demo的源代码，源代码中已经为你准备好这些文件，并且这些都是可以运行的。
源代码下载：KFBlogDemo.zip
数据库：Northwind（2005,2008 Northwind下载）
一、 Json标准格式和验证
由于自己在使用jqgrid的过程中曾经使用过不
规范
编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载
的json，导致数据jqgrid一直无法显示，所以在此有必要简单讲一下json的标准格式和验证方式。
虽然在js中字符串也可以用单引号来表示，但是json的标准格式是用双引号把属性和值给括起来的，注意是属性和值(当然数值类型的值可以省去双引号)。下列Json格式中除了最后一条是标准的，前面几条都是不标准的。
{ 'name' : 'keepfool' } // 错误格式,proerty和value应用双引号
{ name: 'keepfool' } // 错误格式，property应用双引号括起来，value应用双引号
{ name: "keepfool" } // 错误格式，property应用双引号括起来
{ "name" : 'keepfool' } // 错误格式，value应用双引号
{ "name" : "keepfool" } // 标准格式
有时候手动生成json格式的字符串，可能会不符合标准，可以通过下面两个在线验证工具执行验证，我推荐使用第一个，因为它能够准确的定位出json串出错的地方，下面的几个例子也是通过第一个在线工具做验证的。
例子1（属性没带引号）：
{ id: "1", "invdate": "2010-05-24", "name": "test", "note": "note", "tax": "10.00", "total": "2111.00" }
http://wangming.wan128.cn
例子2（属性带单引号）：
{ "id": "1", "invdate": '2010-05-24', "name": "test", "note": "note", "tax": "10.00", "total": "2111.00" }
例子3（正确）：
{ "id": "1", "invdate": "2010-05-24", "name": "test", "note": "note", "tax": "10.00", "total": "2111.00" }
二、jquery ui theme的使用
在文章的开篇我已经提到过jquery ui，它的使用方式我会在下面一步一步列出来，希望对那些还不太会使用jquery ui theme的童鞋们有所帮助。
1. 项目创建
在VS下创建一个Web网站或者Web应用程序，创建一个themes目录。如下图：
2. Base Theme的使用
先到http://jqueryui.com/themeroller/下载一个theme，就选那个最基本的灰色调的。
如果你已经熟悉下面的步骤并且对于下面的步骤不感兴趣，可以直接跳至关键的代码区域
然后会看到下面这个画面，甭管左边有哪些组件，直接download.
把下载得到的jquery-ui-1.8.16.custom.zip文件解压出来，找到base目录（\jquery-ui-1.8.16.custom\development-bundle\themes\base），将base目录复制到themes文件夹下。
找到ui目录（\jquery-ui-1.8.16.custom\development-bundle\ui\），同样将其复制到themes目录下，ui目录包含三部分：
(1). jquery ui组件
(2). 压缩后的jquery ui组件（在minified文件夹中）
(3). 本地化语言文件（i18n）
现在基本的准备都已经做好了，下面我们来创建第一个页面BaseTheme.html，并演示一个手风琴的效果（accordion组件），请看基础并且关键的步骤：
(1). 引用jquery ui css
(2). 引用jquery ui js
(3). 手风琴html代码
(4). 实现jquery 手风琴效果
最终的效果如下图，当然完整的代码已经包含在下载文件中了，您也可以直接运行里面的代码。
3. theme的使用方式
Base Theme的使用方式我们已经使用过了，但是这个灰色调的主题可能并不符合您网站的主题色调，不过幸运的是http://jqueryui.com/themeroller/已经为我们提供了很多种不同色调而且比较美观的主题，你可以自行去下载。当然如果你觉得某一款主题看起来不错，但某些样式还需要一些轻微的改动才能应用到自己的程序中，你可以使用Edit去进行编辑，然后生成自己需要的主题。
在第2步中已经列出了jquery ui的使用方式，如果你想换一个主题使用，方式和上面的代码步骤是相同的。
以lightness主题为例：
唯一不同之处是对css的引用
这里演示的例子都是accordion的，如果你想尝试其他的jquery ui组件，可以自行更换。但关键的两行代码是必不可少的，它们是jquery ui组件的基础：
4. 主题切换的实现
有了前面的基础，要实现主题切换已经很简单了，因为我们已经知道jquery theme的关键之处——引用jquery.ui.all.css，请看代码：
步骤I
步骤II
请选择主题：
步骤III
效果图：
5. 单个页面多主题的实现
单个页面多主题的实现需要在http://jqueryui.com/download页面下载时多做一个步骤——指定css scope
点开Advanced Theme Settings，指定css scope，一般为css class的命名方式
点击CSS Scope后面的
按钮，你会发现css scope是专门针对多主题应用。
下面是完整的代码：
多主题
效果如下：
三、jqgrid的使用方式
上面的两大步都是为了使用jqgrid做准备，冗长的叙述和截图看起来很多，其实知道是jquery ui是怎么回事儿以后就会觉得很简单，步骤也不多。
jqgrid的项目地址：http://www.trirand.com/blog/，目前最新的版本是4.3的，也是我正在使用的版本。
1. jqgrid的local data使用方式
请看代码示例1：
jqgrid有几个较为关键的属性：
· data：指定jqgrid的数据源
· datatype：数据源的格式——local,javascript,function,json,jsonstring,xml。默认的数据源格式为xml
· colNames：列名
· colModels：指定列的属性，例如name用于关联数据源，index用于排序时的索引
· sortname和sortorder分别指定jqgrid首次加载时的排序字段和排序方式
· pager：指定分页容器。
上面这个例子的效果如下图：
2. jqgrid的server data之loadonce方式
实际的应用中数据都来源于后端，local方式基本不会使用。jqgrid中有一种loadonce的方式，当然后台提供所有的数据，分页、排序功能都由客户端自己去实现。数据少的时候用这种方式是最为快速的，毕竟只做一次请求后台除了输出数据外不需要再写其他的代码了。
请看代码示例：
这段代码和local data的形式中不同之处在于：
(1). url：指定了请求的数据源。（test.json文件的内容和第1个例子中的mydata 内容一样）
(2). datatype：将数据格式改为json，而不是local
(3). loadonce： true（默认情况下为false，显示指定只加载一次数据）
OK，编译运行，但是结果却没有出现例子1中的效果图，jqgrid里面完全没有数据显示。
页面LoadOnce.aspx效果：
这时候jqgrid中一个更为关键的属性出现了，jsonReader。既然指定了数据格式为json，那么后端传过来的数据格式总不能我说什么就是什么吧，{"id":1, "name":"keepfool"}和{1,"keepfool"}都是正确的json数据，当传到前端时，前端怎么会知道要匹配哪一种形式？jsonReader顾名思义，就是用来读取json的，当然也要给它定个规矩。
让我们来看看http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data中默认的json格式是怎么样的吧
当没有设置jsonReader属性时，提供的json格式应该是下面这种形式的：
它让你指定total,page,records属性（分别对应总页数、当前页、记录总数）；rows属性，还必须指定id和cell属性，cell属性里面仅仅是单元格的值，还不能包括列名。如果按照默认的jsonReader来读取数据，你可能会写出如下构造json的代码：
public class MyOrder : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string sql = "select top 100 OrderID,CustomerID,ShipName,OrderDate from Orders ";
DataTable dt = SqlHelper.ExecuteDataset(sql).Tables[0];
IList
浙公网安备 33021202002483