之前在空闲的时间学习了jQuery中插件Flexigrid的用法，是采用将数据集转换成JSON格式字符串在Flexigrid中显示，结果遇到了一个头大的问题，Flexigrid在页面上只显示表头就是不显示数据，也没有其它的错误，json格式字符串也检查了N多遍，完全正确。折腾了两天，实在是没办法了，就换了个jQuery的1.3.2 版本，结果出人意料数据正常显示了，总算没白费功夫。
然后就试了试其它的几个版本，发现只有1.3.2 的低版本是可以完全正常显示。
jQuery下载：http://jqueryjs.googlecode.com/files/jquery-1.3.2.js
Flexigrid下载：http://www.flexigrid.info/
下面是部分学习代码：
flexgrid.aspx页面
代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="flexgrid.aspx.cs" Inherits="flexgrid" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title>grid数据显示</title>
8 <link rel="stylesheet" type="text/css" href="flexigrid/css/flexigrid/flexigrid.css" />
9 <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
10 <script type="text/javascript" src="flexigrid/flexigrid.js"></script>
11 </head>
12 <script type="text/javascript">
13 $("document").ready(function() {
14 $("#flex1").flexigrid
15 (
16 {
17 url: 'datastring/GridJson.ashx',
18 dataType: 'json',
19 method: 'POST',
20 colModel: [
21 { display: '编号', name: 'iso', 40, sortable: true, align: 'center' },
22 { display: '功能名称', name: 'name', 120, sortable: true, align: 'left' },
23 { display: '级别', name: 'printable_name', 40, sortable: true, align: 'left' },
24 { display: '链接', name: 'iso3', 150, sortable: true, align: 'left', hide: false },
25 { display: '说明', name: 'numcode', 200, sortable: true, align: 'left' },
26 { display: '操作', name: 'operator', 50, sortable: true, align: 'center' }
27 ],
28 buttons: [
29 { name: '添加', bclass: 'add', onpress: 'button' },
30 { name: '删除', bclass: 'delete', onpress: 'button' },
31 { name: '修改', bclass: 'modify', onpress: 'button' },
32 { separator: true }
33 ],
34 searchitems: [
35 { display: '编号', name: 'id' },
36 { display: '功能名称', name: 'fun_name', isdefault: true }
37 ],
38 sortname: "id",
39 sortorder: "asc",
40 usepager: true,
41 title: '功能列表',
42 useRp: true,
43 rp: 10,
44 rpOptions: [10, 15, 20, 25, 40, 60], //可选择设定的每页结果数
45 pagestat: '显示 {from} 到 {to} 页 总共 {total} 条记录',//显示当前页和总页面的样式
46 procmsg: '请等待,数据正在加载中 …', //正在处理的提示信息
47 resizable: false, //是否可伸缩
48 showTableToggleBtn: true,
49 700,
50 onSubmit: addFormData,
51 height: 200
52 })
53 });
54
55 function addFormData() {
56 var dt = $('#sform').serializeArray();
57 $("#flex1").flexOptions({ params: dt });
58 return true;
59 }
60
61 $('#sform').submit
62 (
63 function() {
64 $('#flex1').flexOptions({ newp: 1 }).flexReload();
65 return false;
66 }
67 );
68 </script>
69 <body>
70 <form id="sform" runat="server">
71 <div>
72 <table id="flex1" style="display:none"></table>
73 </div>
74 </form>
75 </body>
76 </html>
77
GridJson.ashx页面
代码
1 <%@ WebHandler Language="C#" Class="GridJson" %>
2
3 using System;
4 using System.Web;
5 using System.Web.Services;
6
7 [WebService(Namespace = "http://tempuri.org/")]
8 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
9 public class GridJson : IHttpHandler {
10
11 public void ProcessRequest(HttpContext context)
12 {
13
14 context.Response.Clear();
15 context.Response.ContentType = "text/HTML"; //text/plain image/GIF image/JPEG application/x-cdf
16
17 //得到当前页
18 string CurrentPage = context.Request["page"];
19 //得到每页显示多少
20 string PageShowLimit = context.Request["rp"];
21 //得到主键
22 string TableID = context.Request["sortname"];
23 //得到排序方法
24 string OrderMethod = context.Request["sortorder"];
25
26 //得到要过滤的字段
27 string FilterField = context.Request["qtype"];
28 //得到要过滤的内容
29 string FilterFieldContext;
30 if (context.Request.Form["letter_pressed"] == null)
31 {
32 FilterFieldContext = "";
33 }
34 else
35 {
36 FilterFieldContext = context.Request["letter_pressed"];
37 }
38 context.Response.Write(GetGrid());
39 context.Response.Flush();
40 context.Response.Close();
41 context.Response.End();
42 }
43
44 public bool IsReusable {
45 get {
46 return false;
47 }
48 }
49
50 public String GetGrid()
51 {
52 string gridjson = "";
53
54 //获取表格控件返回参数
55 Int32 nPages = 1;//当前页数
56 Int32 nPageSize = 10;//每页记录数
57
58 string sqlstr = "select id,fun_name,fun_level,fun_url,fun_info from function";
59 System.Data.DataSet ds = AccessDB.Dataset(sqlstr);
60 gridjson = FlexGridJSONData.DtToJSON(ds.Tables[0], nPages.ToString(), ds.Tables[0].Rows.Count.ToString());
61 return gridjson;
62 }
63 }
FlexGridJSONData.cs类
代码
1 public static string DtToJSON(DataTable dt, string page, string total)
2 {
3
4 StringBuilder jsonString = new StringBuilder();
5 jsonString.AppendLine("{");
6 jsonString.AppendFormat("page: {0},\n", page);
7 jsonString.AppendFormat("total: {0},\n", total);
8 jsonString.AppendLine("rows: [");
9
10 for (int i = 0; i < dt.Rows.Count; i++)
11 {
12 jsonString.Append("{");
13 jsonString.AppendFormat("id:'{0}',cell:[", dt.Rows[i][0].ToString());
14 for (int j = 0; j < dt.Columns.Count; j++)
15 {
16 if (j == dt.Columns.Count - 1)
17 {
18 jsonString.AppendFormat("'{0}'", dt.Rows[i][j].ToString());
19 }
20 else
21 {
22 jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString());
23 }
24
25 if (j == dt.Columns.Count - 1)
26 {
27 jsonString.AppendFormat(",'{0}'", "<input type=\"button\" value=\"查看\" id=\"sss\" onclick=\"sss(" + dt.Rows[i][0].ToString() + ")\" />");
28 }
29
30 }
31
32 jsonString.Append("]");
33 if (i == dt.Rows.Count - 1)
34 {
35 jsonString.AppendLine("}");
36
37 }
38 else
39 {
40
41 jsonString.AppendLine("},");
42 }
43
44 }
45
46 jsonString.Append("]");
47 jsonString.AppendLine("}");
48
49 return jsonString.ToString();
50 }
后面需要仔细研究一下插件Flexigrid的代码，不能因为jQuery的版本问题，而出现这样的问题。
如果有高手已经知道具体的原因可以指点一下，大家共同交流进步~~~~~~~~~~~