ExtJs的.NET控件----YuiGrid(分页/在线编辑)

本文将介绍ExtJs的.NET控件YuiGrid分页机制和在线编辑功能.

一、分页

YuiGrid的分页机制不是很强大,内置有两种分页样式,下图便是其中的一种.

本示例代码是借鉴于YuiGrid源代码中的测试案例的代码,使用MSSQL2005数据库,下面为分页查询的代码:

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

offset = offset / page_size;
9

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

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

//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 }

二、在线编辑

在实现YuiGrid的在线编辑，首先需将其EnableEdit属性设为True,然后通过CellEdited事件来做数据库更新操作。其实更新数据库无非就是将当前行的数据取出来，然后执行一条相应的SQL就OK，这里的重点应该是取数据，在标准GridView里通常都是通过命令参数来搞定的，YuiGrid不同的是通过他自己的事件传递的对象属性来获取，如下：

protected 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