最近流行的JQGrid似乎不错，最近也没什么事，也就来学习学习了，可看了好多的相关这方面的资料，就是很少有实际的。NET环境中的文章，于是我自己来交流一下心得。运行界面:
我在这两天的学习中发现了应当注意的问题，希望对使用。NET的人有些帮助。目前的最新版本是3。5了，可以直接在官网下载
第一个问题是，css及JS文件夹的正确引用
<link href="css/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="css/CRselectBox.css" rel="stylesheet" type="text/css" />
<!--以下是JS引用部分,这里的顺序不能变变了会显示不出数据-->
<!--另外这些文件的可以在官网下载-->
<script src="js/jquery.js" type="text/javascript"></script>(1)
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>(2)
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>(3)
cs:大家知道如果jquery他自己有着丰富美丽的UI，所以这里的CSS如果引用不正确，当然页面是无法看到的
js:JS的引用它有个先后顺序问题，不信你可以把上面的jquery.jqGrid.min.js放入第一行试试
呵呵，以上两点是我在实际学习时遇到的，希望对新手们有个帮助，当然高手就无须我多言啦!
JS脚本:
<script type="text/javascript">
jQuery("#list").jqGrid({
url: 'GridData.ashx',//地址文件
datatype: "json",
colNames: ['用户ID', '登陆名', '描述', '最后登陆时间'],//这里是显示的数据库表的字段名称
colModel: [
{ name: 'iUSERID', index: 'iUSERID', 30 },
{ name: 'sUserName', index: 'sUserName', 100 },
{ name: 'sQuestion', index: 'sQuestion', 300 },
{ name: 'dtLastLoginTime', index: 'dtLastLoginTime', 120 },
],//这里是数据读取到的字段列名
rowNum: 10,
rowList: [10, 20, 30],
pager: jQuery('#pager'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "JQGridDemo"
}).navGrid("#pager", { edit: false, add: false, del: false });
</script>
这个脚本如果是放在BODY中可以这么写，
如果你是放入<HEAD>标签中的，那么请在开始部分加入jQuery(document).ready(function(){...上面的脚本块});
下面要说的是关键，也就是数据的来源，我是采用的JSON对象，这里我是通过后台写了一个函数，将数据库中的数据读取出来转成JSON格式,具体的请看下面的整个工程文件
游览页面:Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQGridDemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="css/CRselectBox.css" rel="stylesheet" type="text/css" />
<!--以下是JS引用部分,这里的顺序不能变变了会显示不出数据-->
<!--另外这些文件的可以在官网下载-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<br />
<br />
<table id="list" class="scroll" cellpadding="0" cellspacing="0"><!--用于数据显示-->
</table>
<div id="pager" class="scroll" style="text-align: center;"><!--用于分页的层-->
</div>
<br />
<script type="text/javascript">
jQuery("#list").jqGrid({
url: 'GridData.ashx',//地址文件
datatype: "json",
colNames: ['用户ID', '登陆名', '描述', '最后登陆时间'],//这里是显示的数据库表的字段名称
colModel: [
{ name: 'iUSERID', index: 'iUSERID', 30 },
{ name: 'sUserName', index: 'sUserName', 100 },
{ name: 'sQuestion', index: 'sQuestion', 300 },
{ name: 'dtLastLoginTime', index: 'dtLastLoginTime', 120 },
],//这里是数据读取到的字段列名
rowNum: 10,
rowList: [10, 20, 30],
pager: jQuery('#pager'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "JQGridDemo"
}).navGrid("#pager", { edit: false, add: false, del: false });
</script>
</body>
</html>
数据处理的后台代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Runtime.Serialization.Json;
using System.Web.Script.Serialization;
using SnailGame.DBUtility;
namespace JQGridDemo
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GridData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Buffer = true;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
context.Response.AddHeader("pragma", "no-cache");
context.Response.AddHeader("cache-control", "");
context.Response.CacheControl = "no-cache";
//定义数据记取的字符串，这里我是用的SQLHELPER直接读的
//数据表的你可以随便建立
string strSql = "SELECT iUSERID,sUserName,sQuestion,dtLastLoginTime FROM Sys_Users";
//数据存入一个DATATABLE
DataTable dt = SqlServerHelper.Query(strSql).Tables[0];//读取数据
JavaScriptSerializer serializer = new JavaScriptSerializer();
//转成json数据,这里是关键的函数此方法我是放入的一个JSON操作类中的
string jsonData = JsonHandle.GetJson(dt);
context.Response.Write(jsonData);//返回json数据
//反正数据读取一块自己定义
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
JSonHandle类:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Data;
using System.Collections;
using System.ServiceModel.Web;
namespace JQGridDemo
{
public class JsonHandle
{
public JsonHandle() { }
public static string GetJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
//jsonBuilder.Append("\"");
jsonBuilder.Append("{\"page\":1,\"total\":" + dt.Rows.Count + ",\"records\":" + dt.Rows.Count + ",\"rows\"");
jsonBuilder.Append(":[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{\"id\":" + dt.Rows[i]["iUSERID"].ToString() + ",\"cell\":[");
for (int j = 0; j < dt.Columns.Count; j++)
{
//jsonBuilder.Append("\"");
//jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
}
}
只要你的数据读取部分能正常读取，那么页面就可以正常显示
/********************以上只是简单的显示页面，下面说说排序，分页内容
那么JQgrid呢已经默认帮我们作好了这些排序，分页的处理，我们只需加以调用即可。如
完成排序功能，只需要在你后台代码的数据读取部分加上相应的参数就OK，我的方法是一个
GetList(string strWhere,strOrder,string sortType)//1sql where条件,2排序字段，3排序类型
参数我也不用多说，这个方法是我做DEMO时作的。你也可以试。那么怎么获取JQGrid的这些默认字段呢，只要你以正常方式获取
Request.Params["sidx"]这是获取要排序的字段
Request.params["sord"]这是以哪种方式（ASC，DESC）排,以上的排序即可完成