本文将介绍ExtJs的.NET控件YuiGrid分页机制和在线编辑功能.
一、分页
YuiGrid的分页机制不是很强大,内置有两种分页样式,下图便是其中的一种.
本示例代码是借鉴于YuiGrid源代码中的测试案例的代码,使用MSSQL2005数据库,下面为分页查询的代码:
1
public static DataTable GetPagedMovies(string sort,int offset,int page_size,string dir )
2
{
3
SqlConnection con = new SqlConnection();
4 con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
5 con.Open();
6
7
8 offset = offset / page_size;
9
10 offset += 1;
11 //query that gets only the records needed to the page
12 //using the new ROW_NUMBER function in sql2005
13 string sql = "WITH MOVIES AS ( " +
14 " SELECT ROW_NUMBER() OVER " +
15 "(ORDER BY " + sort + " " + dir + ")AS Row," +
16 " ID_MOVIE,TITLE, RATING,VOTES,YEAR,GENRE " +
17 " FROM TB_MOVIE )" +
18 " SELECT ID_MOVIE,TITLE, GENRE,RATING,VOTES,YEAR" +
19 " FROM MOVIES " +
20 " WHERE Row between (@PageIndex-1)* @PageSize+1 and @PageIndex*@PageSize";
21
22 SqlCommand cmd = new SqlCommand(sql, con);
23 //add the parameters to the query to grab the correct page
24 cmd.Parameters.AddWithValue("@PageIndex", offset);
25 cmd.Parameters.AddWithValue("@PageSize", page_size);
26 SqlDataAdapter adapt = new SqlDataAdapter(cmd);
27 DataSet ds = new DataSet();
28 adapt.Fill(ds);
29 //closes the objects and disposes
30
31 //GetMovieCount(ds);
32 con.Close();
33 cmd.Dispose();
34 con.Dispose();
35 return ds.Tables[0];
36
}
public static DataTable GetPagedMovies(string sort,int offset,int page_size,string dir )2
{
3
SqlConnection con = new SqlConnection();4
con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;5
con.Open();6
7
8
offset = offset / page_size;9
10
offset += 1;11
//query that gets only the records needed to the page12
//using the new ROW_NUMBER function in sql200513
string sql = "WITH MOVIES AS ( " +14
" SELECT ROW_NUMBER() OVER " +15
"(ORDER BY " + sort + " " + dir + ")AS Row," +16
" ID_MOVIE,TITLE, RATING,VOTES,YEAR,GENRE " +17
" FROM TB_MOVIE )" +18
" SELECT ID_MOVIE,TITLE, GENRE,RATING,VOTES,YEAR" +19
" FROM MOVIES " +20
" WHERE Row between (@PageIndex-1)* @PageSize+1 and @PageIndex*@PageSize";21
22
SqlCommand cmd = new SqlCommand(sql, con);23
//add the parameters to the query to grab the correct page24
cmd.Parameters.AddWithValue("@PageIndex", offset);25
cmd.Parameters.AddWithValue("@PageSize", page_size);26
SqlDataAdapter adapt = new SqlDataAdapter(cmd);27
DataSet ds = new DataSet();28
adapt.Fill(ds);29
//closes the objects and disposes30
31
//GetMovieCount(ds);32
con.Close();33
cmd.Dispose();34
con.Dispose();35
return ds.Tables[0];36
}代码实现上很简单,有了上面的分页查询,下面只需要在Page_load里将数据进行绑定就OK了.
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 if (!IsPostBack)
4 {
5 int page_size = 10;//default page size
6 int offset = 1;//default page
7 string sortCol, sortDir;
8 if (string.IsNullOrEmpty(Request["sort"]))
9 {
10 sortCol = "ID_MOVIE";
11 sortDir = "ASC";
12 }
13 else
14 {
15 sortCol = Request["sort"];
16 sortDir = Request["dir"];
17 }
18 if (!string.IsNullOrEmpty(Request["limit"]))
19 {
20 page_size = int.Parse(Request["limit"]);
21 offset = int.Parse(Request["start"]);
22 }
23
24
25 YuiGrid1.TotalRecords = Movie.GetMovieCount();
26 YuiGrid1.DataSource = Movie.GetPagedMovies(sortCol,offset,page_size,sortDir);
27 YuiGrid1.DataBind();
28 }
29 }
2 {
3 if (!IsPostBack)
4 {
5 int page_size = 10;//default page size
6 int offset = 1;//default page
7 string sortCol, sortDir;
8 if (string.IsNullOrEmpty(Request["sort"]))
9 {
10 sortCol = "ID_MOVIE";
11 sortDir = "ASC";
12 }
13 else
14 {
15 sortCol = Request["sort"];
16 sortDir = Request["dir"];
17 }
18 if (!string.IsNullOrEmpty(Request["limit"]))
19 {
20 page_size = int.Parse(Request["limit"]);
21 offset = int.Parse(Request["start"]);
22 }
23
24
25 YuiGrid1.TotalRecords = Movie.GetMovieCount();
26 YuiGrid1.DataSource = Movie.GetPagedMovies(sortCol,offset,page_size,sortDir);
27 YuiGrid1.DataBind();
28 }
29 }
二、在线编辑
在实现YuiGrid的在线编辑，首先需将其EnableEdit属性设为True,然后通过CellEdited事件来做数据库更新操作。其实更新数据库无非就是将当前行的数据取出来，然后执行一条相应的SQL就OK，这里的重点应该是取数据，在标准GridView里通常都是通过命令参数来搞定的，YuiGrid不同的是通过他自己的事件传递的对象属性来获取，如下：
1protected void YuiGrid1_CellEdited(object sender, ExtExtenders.GridCellEditedArgs e)
2{
3 SqlConnection con = new SqlConnection();
4 con.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;//ConnectionString
5 con.Open();
6 SqlCommand cmd = new SqlCommand();
7 cmd.Connection = con;
8 string sql = "UPDATE TB_MOVIE SET " + e.Field + "=@" + e.Field +
9 " WHERE ID_MOVIE=@ID_MOVIE";
10
11 cmd.CommandText = sql;
12 cmd.Parameters.AddWithValue("@" + e.Field, e.Value);
13 cmd.Parameters.AddWithValue("@ID_MOVIE", e.Record["ID_MOVIE"]);
14 try
15
{
16 cmd.ExecuteNonQuery();
17
}
18 catch (Exception ex)
19 {
20 System.Diagnostics.Debug.WriteLine(ex.Message);
21 }
22}
protected void YuiGrid1_CellEdited(object sender, ExtExtenders.GridCellEditedArgs e)2
{3
SqlConnection con = new SqlConnection();4
con.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;//ConnectionString5
con.Open();6
SqlCommand cmd = new SqlCommand();7
cmd.Connection = con;8
string sql = "UPDATE TB_MOVIE SET " + e.Field + "=@" + e.Field +9
" WHERE ID_MOVIE=@ID_MOVIE";10
11
cmd.CommandText = sql;12
cmd.Parameters.AddWithValue("@" + e.Field, e.Value);13
cmd.Parameters.AddWithValue("@ID_MOVIE", e.Record["ID_MOVIE"]);14
try15
{
16
cmd.ExecuteNonQuery();17
}18
catch (Exception ex)19
{20
System.Diagnostics.Debug.WriteLine(ex.Message);21
}22
}大致如下图：
YuiGrid里可以非常方便的嵌入ListBox或DropDownList等控件，只需要在外部任意定义一个DropDownList控件，然后将YuiGrid对应列的EditControlId属性设置为该控件ID就OK了。如下代码遍上上图的完整定义：
Code关于ExtJS的.NET控件YuiGrid的分页和在线编辑就介绍这些，详细大家可以访问http://extendersamples.rodiniz.com或下载下面提供的示例代码了解更多。