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

     本文将介绍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}

     代码实现上很简单,有了上面的分页查询,下面只需要在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不同的是通过他自己的事件传递的对象属性来获取，如下：

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

 

大致如下图：
                   

                    

     YuiGrid里可以非常方便的嵌入ListBox或DropDownList等控件，只需要在外部任意定义一个DropDownList控件，然后将YuiGrid对应列的EditControlId属性设置为该控件ID就OK了。如下代码遍上上图的完整定义：

Code
 1<cc1:YuiGrid  ID="YuiGrid1"  runat="server" EnableRowSorting="true" Width="550px" 
 2    EnablePaging="true" PagingStyle="NavBar" EnableEdit="true" OnCellEdited="YuiGrid1_CellEdited" SelectMultiple="true">
 3    <Columns>
 4        <cc1:ColModel header="ID_MOVIE" dataIndex="ID_MOVIE" hidden="true" />
 5        <cc1:ColModel header="Movie Title" dataIndex="TITLE" sortable="true" width="230" allowBlank="false"  maxLength="40"/>
 6        <cc1:ColModel header="Votes" dataIndex="VOTES" sortable="true" width="90" DataType="Numeric" />
 7        <cc1:ColModel header="Rating" dataIndex="RATING" sortable="true" width="60" DataType="Numeric" />
 8        <cc1:ColModel header="Year" dataIndex="YEAR" sortable="true" width="60" EditControlId="cboYear"/>
 9        <cc1:ColModel header="Genre " dataIndex="GENRE" sortable="true" width="120" EditControlId="cboGenre" />
10        
11    </Columns>
12 </cc1:YuiGrid>
13
14<asp:DropDownList ID="cboGenre"  runat="server" CssClass="x-hid">
15    <asp:ListItem Text="Action" Value="Action"></asp:ListItem>
16    <asp:ListItem Text="Adventure" Value="Adventure"></asp:ListItem>
17    <asp:ListItem Text="Animation" Value="Animation"></asp:ListItem>
18    <asp:ListItem Text="Comedy" Value="Comedy"></asp:ListItem>
19    <asp:ListItem Text="Crime" Value="Crime"></asp:ListItem>
20    <asp:ListItem Text="Documentary" Value="Documentary"></asp:ListItem>
21    <asp:ListItem Text="Drama" Value="Drama"></asp:ListItem>
22    <asp:ListItem Text="Family" Value="Family"></asp:ListItem>
23    <asp:ListItem Text="Fantasy" Value="Fantasy"></asp:ListItem>
24    <asp:ListItem Text="Horror" Value="Horror"></asp:ListItem>
25    <asp:ListItem Text="Independent" Value="Independent"></asp:ListItem>
26    <asp:ListItem Text="Musical" Value="Musical"></asp:ListItem>
27    <asp:ListItem Text="Mystery" Value="Mystery"></asp:ListItem>
28    <asp:ListItem Text="Noir" Value="Noir"></asp:ListItem>
29    <asp:ListItem Text="Romance" Value="Romance"></asp:ListItem>
30    <asp:ListItem Text="Sci-Fi" Value="Sci-Fi"></asp:ListItem>
31    <asp:ListItem Text="Thriller" Value="Thriller"></asp:ListItem>
32    <asp:ListItem Text="War" Value="War"></asp:ListItem>
33    <asp:ListItem Text="Western" Value="Western"></asp:ListItem>
34</asp:DropDownList>

 

关于ExtJS的.NET控件YuiGrid的分页和在线编辑就介绍这些，详细大家可以访问http://extendersamples.rodiniz.com或下载下面提供的示例代码了解更多。

示例代码下载