DataGrid和DropDownList的一些配合以及使用css定制DataGrid

有的时候我们需要
（1）在编辑的时候用下拉框选择，并且默认为数据库的内容
（2）使用下拉框过滤数据
（3）使用css统一定制DataGrid
下面给出代码：
数据结构：
表dep：depid（标识主键），depname（学院名字）
表stu：stuid（标识主键），stuname（学生名字），studepid（学院id＝表dep.depid）

create   table  dep(depid  int   not   null ,depname  varchar ( 20 )  not   null )
create   table  stu(stuid  int   not   null ,stuname  varchar ( 20 )  not   null ,studepid  int   not   null )

insert   into  stu
select   1 , ' 学生1 ' , 1
union   select   2 , ' 学生2 ' , 1
union   select   3 , ' 学生3 ' , 2
union   select   4 , ' 学生4 ' , 3
union   select   5 , ' 学生5 ' , 2

insert   into  dep
select   1 , ' 计算机 '
union   select   2 , ' 通讯 '
union   select   3 , ' 商贸 '

前台：

<% @ Page language = " c# "  Codebehind = " WebForm28.aspx.cs "  AutoEventWireup = " false "  Inherits = " test.WebForm28 "   %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
     < HEAD >
         < title > WebForm28 </ title >
         < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
         < meta  name ="CODE_LANGUAGE"  Content ="C#" >
         < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
         < link  href ="css.css"  rel ="stylesheet"  type ="text/css" >
         < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
     </ HEAD >
     < body >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < asp:DropDownList  id ="DropDownList1"  runat ="server"  AutoPostBack ="True" ></ asp:DropDownList >
             < asp:DataGrid  id ="DataGrid1"  runat ="server"  AutoGenerateColumns ="False"  CellSpacing ="1"  BorderWidth ="0px"
                CellPadding ="5"  CssClass ="border"  OnEditCommand ="edit"  OnCancelCommand ="cancel"  OnUpdateCommand ="update"
                DataKeyField ="stuid" >
                 < ItemStyle  CssClass ="item" ></ ItemStyle >
                 < HeaderStyle  CssClass ="header" ></ HeaderStyle >
                 < Columns >
                     < asp:TemplateColumn  HeaderText ="姓名" >
                         < ItemTemplate >
                             <% # DataBinder.Eval(Container.DataItem, " stuname " )  %>
                         </ ItemTemplate >
                         < EditItemTemplate >
                             < asp:TextBox  id ="name"  Runat ="server"  Text ='<%#  DataBinder.Eval(Container.DataItem,"stuname") % > ' Width="88px">
                             </ asp:TextBox >
                         </ EditItemTemplate >
                     </ asp:TemplateColumn >
                     < asp:TemplateColumn  HeaderText ="学院" >
                         < ItemTemplate >
                             <% # DataBinder.Eval(Container.DataItem, " depname " )  %>
                         </ ItemTemplate >
                         < EditItemTemplate >
                             < asp:DropDownList  ID ="dep"  Runat ="server" ></ asp:DropDownList >
                         </ EditItemTemplate >
                     </ asp:TemplateColumn >
                     < asp:EditCommandColumn  ButtonType ="PushButton"  UpdateText ="更新"  CancelText ="取消"  EditText ="编辑" ></ asp:EditCommandColumn >
                 </ Columns >
             </ asp:DataGrid >
         </ form >
     </ body >
</ HTML >

后台：

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Data.SqlClient;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls; 

namespace  test
{
     ///   <summary>
     ///  WebForm28 的摘要说明。
     ///   </summary>
     public   class  WebForm28 : System.Web.UI.Page
    {
         protected  System.Web.UI.WebControls.DropDownList DropDownList1;
         protected  System.Web.UI.WebControls.DataGrid DataGrid1;
 
         private   void  Page_Load( object  sender, System.EventArgs e)
        {
             //  在此处放置用户代码以初始化页面
             if ( ! IsPostBack)
            {
                SetBind();
                SetBind2();
            }
        }

         protected   void  SetBind()
        {

            SqlConnection conn = new  SqlConnection(System.Configuration.ConfigurationSettings.AppSettings[ " conn " ]);
            SqlDataAdapter da = new  SqlDataAdapter( " select * from stu,dep where stu.studepid=dep.depid " ,conn);
            DataSet ds = new  DataSet();
            da.Fill(ds, " table1 " );
             this .DataGrid1.DataSource = ds.Tables[ " table1 " ];
             this .DataGrid1.DataBind();
   
        }

         protected   void  SetBind2()
        {

            SqlConnection conn2 = new  SqlConnection(System.Configuration.ConfigurationSettings.AppSettings[ " conn " ]);
            SqlDataAdapter da2 = new  SqlDataAdapter( " select * from dep " ,conn2);
            DataSet ds2 = new  DataSet();
            da2.Fill(ds2, " table1 " );
             this .DropDownList1.DataSource = ds2.Tables[ " table1 " ];
             this .DropDownList1.DataTextField = " depname " ;
             this .DropDownList1.DataValueField = " depid " ;
             this .DropDownList1.DataBind();
             this .DropDownList1.Items.Insert( 0 , new  ListItem( " 请选择 " , "" ));
   
        }

         protected   void  SetBind3()
        {
             string  s = this .DropDownList1.SelectedValue;
            SqlConnection conn = new  SqlConnection(System.Configuration.ConfigurationSettings.AppSettings[ " conn " ]);
            SqlCommand comm = new  SqlCommand();
            comm.Connection = conn;
             if (s != "" )
            {
                comm.CommandText = " select * from stu,dep where stu.studepid=dep.depid and depid=@depid " ;
                SqlParameter parm1 = new  SqlParameter( " @depid " ,SqlDbType.Int);
                parm1.Value = s;
                comm.Parameters.Add(parm1);
            }
             else
                comm.CommandText = " select * from stu,dep where stu.studepid=dep.depid " ;
            SqlDataAdapter da = new  SqlDataAdapter();
            da.SelectCommand = comm;
            DataSet ds = new  DataSet();
            da.Fill(ds, " table1 " );
             this .DataGrid1.DataSource = ds.Tables[ " table1 " ];
             this .DataGrid1.DataBind();
   
        }
         #region  Web 窗体设计器生成的代码
         override   protected   void  OnInit(EventArgs e)
        {
             //
             //  CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
             //
            InitializeComponent();
             base .OnInit(e);
        }
  
         ///   <summary>
         ///  设计器支持所需的方法 - 不要使用代码编辑器修改
         ///  此方法的内容。
         ///   </summary>
         private   void  InitializeComponent()
        {    
             this .DataGrid1.ItemDataBound  +=   new  System.Web.UI.WebControls.DataGridItemEventHandler( this .DataGrid1_ItemDataBound);
             this .DropDownList1.SelectedIndexChanged  +=   new  System.EventHandler( this .DropDownList1_SelectedIndexChanged);
             this .Load  +=   new  System.EventHandler( this .Page_Load);

        }
         #endregion

         private   void  DataGrid1_ItemDataBound( object  sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            SqlConnection conn = new  SqlConnection(System.Configuration.ConfigurationSettings.AppSettings[ " conn " ]);
            SqlDataAdapter da = new  SqlDataAdapter( " select * from dep " ,conn);
            DataSet ds = new  DataSet();
            da.Fill(ds, " table1 " );
             if (e.Item.ItemType == ListItemType.EditItem)
            {
                DropDownList ddl = (DropDownList)e.Item.FindControl( " dep " );
                ddl.DataSource = ds.Tables[ " table1 " ];
                ddl.DataTextField = " depname " ;
                ddl.DataValueField = " depid " ;
                ddl.DataBind();
                ddl.Items.FindByValue(Convert.ToString(DataBinder.Eval(e.Item.DataItem, " depid " ))).Selected = true ; // 选择数据库内的作为默认
            }
        }

         protected   void  edit( object  sender,DataGridCommandEventArgs e)
        {
             this .DataGrid1.EditItemIndex = e.Item.ItemIndex;
             if ( this .DropDownList1.SelectedValue == "" )
                SetBind();
             else
                SetBind3();
        }

         protected   void  cancel( object  sender,DataGridCommandEventArgs e)
        {
             this .DataGrid1.EditItemIndex =- 1 ;
             if ( this .DropDownList1.SelectedValue == "" )
                SetBind();
             else
                SetBind3();
        }

         protected   void  update( object  sender,DataGridCommandEventArgs e)
        {
             if (e.Item.ItemType == ListItemType.EditItem) // 只有在编辑按下以后才能提交
            {
                SqlConnection conn = new  SqlConnection(System.Configuration.ConfigurationSettings.AppSettings[ " conn " ]);
                SqlCommand comm = new  SqlCommand( " update stu set stuname=@name,studepid=@depid where stuid=@id " ,conn);
                SqlParameter parm1 = new  SqlParameter( " @name " ,SqlDbType.NVarChar, 50 );
                parm1.Value = ((TextBox)e.Item.FindControl( " name " )).Text;
                SqlParameter parm2 = new  SqlParameter( " @depid " ,SqlDbType.Int);
                parm2.Value = ((DropDownList)e.Item.FindControl( " dep " )).SelectedValue;
                SqlParameter parm3 = new  SqlParameter( " @id " ,SqlDbType.Int);
                parm3.Value = this .DataGrid1.DataKeys[e.Item.ItemIndex];
                comm.Parameters.Add(parm1);
                comm.Parameters.Add(parm2);
                comm.Parameters.Add(parm3);
                conn.Open();
                comm.ExecuteNonQuery();
                conn.Close();
                 this .DataGrid1.EditItemIndex =- 1 ;
                 if ( this .DropDownList1.SelectedValue == "" )
                    SetBind();
                 else
                    SetBind3(); // 如果选择过滤则使用SetBind3()
            }
        }

         private   void  DropDownList1_SelectedIndexChanged( object  sender, System.EventArgs e)
        {
            SetBind3();
        }
    }
}

css：

.border  {
 background-color :  #00496C ;
}
.header  {
 font-family :  "宋体", sans-serif ;
 font-size :  10pt ;
 font-weight :  bold ;
 color :  #FFFFFF ;
 background-color :  #0080C0 ;
 text-align :  center ;
}
.item  {
 font-family :  "宋体", sans-serif ;
 font-size :  9pt ;
 font-weight :  normal ;
 color :  #0080C0 ;
 background-color :  #FFFFFF ;
 text-align :  center ;
}

代码比较简单，下面简单说明一下：
（1）SetBind()是基本的绑定;SetBind2()是绑定外面的那个DropDownList;SetBind3()是在下拉框选择了以后过滤后的DataGrid的绑定
（2）这里使用Css来实现表格边框是利用CellSpacing，所以这个数值就是边框的宽度，在表格边框的css中使用background-color来描述边框的颜色。