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\ " οnclick=\ " 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的版本问题，而出现这样的问题。

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

 

转载于:https://www.cnblogs.com/ZHF/archive/2010/11/29/1890805.html