ASP.net 中使用Flexigrid详细教程之二直接使用数据库数据（有图有真相）

上篇简单回顾：

在上篇（基本使用）我们提到Flexigrid使用现有的数据源控件可以展现数据，本次讲一下直接获取的方法。

开头还是广告时间：给自己建立的www.vfish.tk 作一个广告，喂鱼技术支持站。支持我，就来看看我的网站，你懂的。

要Flexigrid直接得到数据库中的数据，必须是Json格式，才能解析。因此，我们得把数据库中的数据读出来，并把Ds转成Flexigrid识别的格式。我们用一个Ashx文件来检索并转换数据。为了能使用Flexigrid的查询和排序功能，我们要编写一个存储过程，用于返回数据和总条数(用于Flexigrid分页)。使用存储过程的另一个好处是，只查询当前页的数据，减少数据传输。加快响应速度。

因此我们需要做的就是如下工作：

1、建立针对一个表的存储过程

2、建立一个ASHX文件来检索并提供数据

3、使用一个类来把Dataset转为JSON格式

4、前台页面参数配置

首先来看第一步，对数据表写一个存储过程：

示例代码：本存储过程不但返回数据，还返回数据的总条数（用于分页）

存储过程代码

1 USE [TzGC] --我的数据库名
2 GO
3 /****** Object: StoredProcedure [dbo].[GetProList] Script Date: 09/30/2010 08:49:45 ******/
4 SET ANSI_NULLS ON
5 GO
6 SET QUOTED_IDENTIFIER ON
7 GO
8 Create PROCEDURE [dbo].[GetProList] --存储过程名
9 @WhereClause nvarchar(4000),
10 @SortExpression nvarchar(128),
11 @RowIndex int,
12 @NoOfRows int
13 AS
14 BEGIN
15
16 DECLARE @SQL nvarchar(4000)
17
18 IF (@WhereClause != '')
19 BEGIN
20 SET @WhereClause = 'WHERE ' + char(13) + @WhereClause
21 END
22
23 IF (@SortExpression != '')
24 BEGIN
25 SET @SortExpression = 'ORDER BY ' + @SortExpression
26 END
27
28 SET @SQL = 'WITH ProjectRows AS (
29 SELECT ROW_NUMBER() OVER ('+ @SortExpression +')AS Row,
30 [pro_id],
31 [pro_no],
32 [pro_name],
33 [pro_type],
34 [pro_invest],
35 [usr_cname],
36 [pro_date],
37 [pro_process]
38 FROM
39 [ViewPro]
40 '+ @WhereClause +'
41 )
42 SELECT
43 [pro_id],
44 [pro_no],
45 [pro_name],
46 [pro_type],
47 [pro_invest],
48 [usr_cname],
49 [pro_date],
50 [pro_process]
51 FROM
52 ProjectRows
53 WHERE
54 Row between '+ CONVERT(nvarchar(10), @RowIndex) +'And ('+ CONVERT(nvarchar(10), @RowIndex) +' + '+ CONVERT(nvarchar(10), @NoOfRows) +')'
55
56 EXEC sp_executesql @SQL
57
58 SET @SQL = 'SELECT @iRet=COUNT([pro_id])
59 FROM
60 [ViewPro]
61 ' + @WhereClause
62 declare @Ret int
63 EXEC sp_executesql @SQL,N'@iRet int OUTPUT',@Ret OUTPUT
64
65 return @Ret
66 -- EXEC sp_executesql @SQL
67
68 END
69

第二步，写ASHX文件：

ASHX代码

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(GetProList());
}

public String GetProList()
{
int page = 1;
if (HttpContext.Current.Request.Form["page"] != null)
{
page = int.Parse(HttpContext.Current.Request.Form["page"].ToString());
}
int rp = 1;
if (HttpContext.Current.Request.Form["rp"] != null)
{
rp = int.Parse(HttpContext.Current.Request.Form["rp"].ToString());
}
string sortname = "pro_id";
if (HttpContext.Current.Request.Form["sortname"] != null)
{
sortname = HttpContext.Current.Request.Form["sortname"].ToString();
}

string whereCondition = "1=1";
if (HttpContext.Current.Request.Form["qtype"] != null && HttpContext.Current.Request.Form["query"] != null && HttpContext.Current.Request.Form["query"].ToString() != string.Empty)
{
whereCondition = BuildWhereCondition(HttpContext.Current.Request.Form["qtype"].ToString(), HttpContext.Current.Request.Form["query"].ToString());
}
　　　　　　 string sortorder = "DESC";
if (HttpContext.Current.Request.Form["sortorder"] != null)
{
sortorder = HttpContext.Current.Request.Form["sortorder"].ToString();
}
string sortExp = sortname + " " + sortorder;
int start = ((page - 1) * rp) + 1;

DataSet ds = new DataSet();

int total = 0;
BLL.project bll = new BLL.project();
ds = bll.GetListByPage(whereCondition, sortExp, start, rp - 1, out total);

return JsonForJqgrid(ds.Tables[0], page, total);

}

目前这个文件中接收的几个参数，都是flexigrid中默认的参数（排序、查询、页码等）

以下过程访问数据库：

代码

1 public DataSet GetListByPage(string whereClause, string sortExp, int startRowIndex, int numberOfRows, out int count)
2 {
3 DataSet ds = new DataSet();
4
5 const string SP = "dbo.GetProList";
6
7 SqlParameter[] parameters = {
8 new SqlParameter("@WhereClause", SqlDbType.VarChar, 255),
9 new SqlParameter("@SortExpression", SqlDbType.VarChar, 255),
10 new SqlParameter("@RowIndex", SqlDbType.Int),
11 new SqlParameter("@NoOfRows", SqlDbType.Int)
12
13 };
14
15 parameters[0].Value = whereClause;
16 parameters[1].Value = sortExp;
17 parameters[2].Value = startRowIndex;
18 parameters[3].Value = numberOfRows;
19
20 return DbSQL.RunProcedure(SP, parameters, "ds", out count);
21 }

3、转成JSON代码（有高手直接用的DLL文件，我是手拼的，这里注意jquery1.4后只支持双引号）：

代码

1 public static string JsonForJqgrid(DataTable dt, int page, int total)
2 {
3 StringBuilder jsonBuilder = new StringBuilder();
4 jsonBuilder.Append("{");
5
6 jsonBuilder.Append("\"page\":" + page.ToString() + ",\"total\":" + total.ToString() + ",\"rows\":[");
7 // jsonBuilder.Append("page:" + page.ToString() + ",total:" + total.ToString() + ",rows:[");
8 //jsonBuilder.Append(":[");
9 for (int i = 0; i < dt.Rows.Count; i++)
10 {
11 jsonBuilder.Append("{");
12 for (int j = 0; j < dt.Columns.Count; j++)
13 {
14 //jsonBuilder.Append("\"");
15 if (j == 0)
16 {
17 // jsonBuilder.Append(dt.Columns[j].ColumnName);
18 // jsonBuilder.Append("id:");
19 jsonBuilder.Append("\"id\":");
20 jsonBuilder.Append(dt.Rows[i][j].ToString());
21 //jsonBuilder.Append(",cell:[");
22 jsonBuilder.Append(",\"cell\":[");
23 jsonBuilder.Append("\"");
24 jsonBuilder.Append("<input type='radio' name='chk' onclick='getID(this.value)' value='");
25 jsonBuilder.Append(dt.Rows[i][j].ToString());
26 jsonBuilder.Append("' />");
27
28 jsonBuilder.Append("\",");
29 }
30 else
31 {
32 //jsonBuilder.Append(dt.Columns[j].ColumnName);
33 jsonBuilder.Append("\"");
34 jsonBuilder.Append(dt.Rows[i][j].ToString());
35 jsonBuilder.Append("\",");
36 }
37
38 }
39 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
40 jsonBuilder.Append("],");
41 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
42 jsonBuilder.Append("},");
43 }
44 if (total > 0)
45 {
46 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
47 }
48
49 jsonBuilder.Append("]");
50 jsonBuilder.Append("}");
51 return jsonBuilder.ToString();
52 }
53

最后，就可以在前面配置啦（引用不写了，只粘关键的）：

代码

1 <script type="text/javascript">
2 $(document).ready(function () {
3
4 $("#grdProList").flexigrid
5 (
6 {
7 url: '../JSON/ProList.ashx',
8 dataType: 'json',
9 colModel: [
10 // { display: '<input type="checkbox" id="checkAll"/>', name: 'check', 50, sortable: false, align: 'center', hide: false },
11 {display: '选择', name: '', sortable: true, 20, align: 'center' },
12 { display: '项目编码', name: 'pro_no', sortable: true, 80, align: 'center' },
13 { display: '项目名称', name: 'pro_name', sortable: true, 80, align: 'center' },
14 { display: '业务类别', name: 'pro_type', sortable: true, 80, align: 'left' },
15 { display: '投资规模', name: 'pro_invest', sortable: true, 80, align: 'left' },
16 { display: '负责经理', name: 'usr_cname', sortable: true, 80, align: 'left' },
17 { display: '启动时间', name: 'pro_date', sortable: true, 80, align: 'right' },
18 { display: '年度投入工日', name: '', sortable: true, 80, align: 'left' },
19 { display: '年度开票', name: '', sortable: true, 80, align: 'left' },
20 { display: '年度回款', name: '', sortable: true, 80, align: 'left' }
21 ],
22 buttons: [
23 { name: '显示 / 隐藏查询',
24 bclass: 'showMagnifier',
25 onpress: queryBt
26 },
27 {
28 name: '导出excel',
29 bclass: 'showMagnifier',
30 onpress: toExcel
31 }
32 ],
33 searchitems: [
34 { display: '项目编码', name: 'pro_no' },
35 { display: '项目名称', name: 'pro_name' },
36 { display: '业务类别', name: 'pro_type' },
37 { display: '负责经理', name: 'usr_cname' }
38 ],
39
40 ShowToggleCol: true,
41 singleSelect: true,
42 sortname: 'pro_id',
43 sortorder: 'asc',
44 usepager: true,
45 striped: true,
46 title: '项目列表',
47 useRp: true,
48 rp: 20,
49 860,
50 // hideOnSubmit: true,
51 // onSubmit: addFormData,
52 height: 400,
53 pagestat: '显示 {from} 到 {to}，共 {total} 条',
54 procmsg: '请等待数据正在加载中 …',
55 nomsg: '没有数据',
56 onError: '查询出错，请刷新'
57 }
58 );
59
60
61 function queryBt() {
62 $("#sform").slideToggle(200);
63 }
64 function toExcel() {
65 preview();
66
67 }
68
69
70 //This function adds paramaters to the post of flexigrid. You can add a verification as well can
71 //return false if you don't want flexigrid to submit
72 function addFormData() {
73
74 //passing a form object to serializeArray will get the valid data from all the objects, but, if you pass a non-form object,
75 //you have to specify the input elements that the data will come from
76 var dt = $('#sform').serializeArray();
77 $("#grdProList").flexOptions({ params: dt });
78 return true;
79 }
80
81 $('#sform').submit
82 (
83 function () {
84 $('#grdProList').flexOptions({ newp: 1 }).flexReload();
85 return false;
86 }
87 );
88
89 });
90
91 </script>

有人提出，为什么不介绍Flexigrid中的一大堆参数，因为相似文章太多了，我只讲那些文章中一带而过，或者根本没有提及的。

下一篇我将讲一下，怎么样在flexigrid中使用多条件搜索。综合实例也会稍候放出。

写代码和文章不容易，以上大部分都是在公交车上用手机打字的，所以看后请大家支持下我，谢谢。祝大家中秋愉快。

欢迎访问本人的office技术小站：www.vfish.info