jQuery中插件Flexigrid的用法

　　之前在空闲的时间学习了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', width: 40, sortable: true, align: 'center' },
22         { display: '功能名称', name: 'name', width: 120, sortable: true, align: 'left' },
23         { display: '级别', name: 'printable_name', width: 40, sortable: true, align: 'left' },
24         { display: '链接', name: 'iso3', width: 150, sortable: true, align: 'left', hide: false },
25         { display: '说明', name: 'numcode', width: 200, sortable: true, align: 'left' },
26         { display: '操作', name: 'operator', width: 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         width: 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的版本问题，而出现这样的问题。

　　如果有高手已经知道具体的原因可以指点一下，大家共同交流进步~~~~~~~~~~~

posted on 2010-11-29 10:15 ZEKELOVE 阅读(2348) 评论(0) 编辑收藏举报