学步园

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

一、分页

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

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

 1public 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了.

二、在线编辑

     在实现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}

大致如下图：
                   

     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="