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来描述边框的颜色。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/tohen/p/745333.html