zoukankan      html  css  js  c++  java
  • (原创)DataGrid和DropDownList的一些配合以及使用css定制DataGrid

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

    前台:
    <%@ Page language="c#" Codebehind="WebForm28.aspx.cs" AutoEventWireup="false" Inherits="csdn.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 csdn
    {
     /// <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来描述边框的颜色。

  • 相关阅读:
    IDEA下同时使用Git和svn
    IDEA进行activiti-archetype-unittest脚手架的安装
    正则表达式
    关于JS堆栈与拷贝
    按值传递--
    JS---变量、作用域和内存问题
    laod
    待解决
    闭包2
    闭包1
  • 原文地址:https://www.cnblogs.com/lovecherry/p/125525.html
Copyright © 2011-2022 走看看