DataGrid单元格移动变色,点击变色,双击取消颜色,排序.

Posted on 2005-12-14 08:39 一个人的天空阅读(5527) 评论(16) 编辑收藏举报

实现:
1.当鼠标移动到DataGrid的单元格时,单元格变色,并且单元格里的字体同时变色,鼠标变为手的形状.鼠标移出单元格,恢复原样.
2.当鼠标点击DataGrid的单元格时,单元格变色,单元格上的显示字体变色;当点击另一个单元格时,前一个单元格以及字体颜色恢复原样,此时的单元格变色,字体变色.
3.当双击DataGrid上单击时变色的单元格时,颜色取消,恢复原样.
4.DataGrid按顺序(ASC)和倒序(DESC)排序,并且DataGrid排序的列头显示排序标志.
排序必须注意:列头名必须和排序的字段名一致,否则将不会显示排序标志.

DataGrid点击变色的注册事件在dbOrders_ItemDataBound事件中注册.
if(e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.AlternatingItem)
   {
    e.Item.Attributes.Add("onmouseover","tdOver(this)");
    e.Item.Attributes.Add("onmouseout","tdOut(this)");
    e.Item.Attributes.Add("onclick","tdColor(this)");
    e.Item.Attributes.Add("ondblclick","tdColorDbl(this)");
   }
而<script language="javascript"></script>之间的代码可以保存为JS文件,然后使用<script language="javascript" src="JS文件名"/>即可.

以下例子使用的是NorthWind数据库中的Orders表.

Html代码:

<%@ Page language="c#" Codebehind="DataGridColor.aspx.cs" AutoEventWireup="false" Inherits="NetTest.DataGridExample.DataGridColor" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
  <title>DataGrid移动,单击变色</title>
  <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
  <meta content="C#" name="CODE_LANGUAGE">
  <meta content="JavaScript" name="vs_defaultClientScript">
  <LINK href="../Css/BasicLayout.css" type="text/css" rel="stylesheet">
  <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
  <script language="javascript">
   
  </script>
  <form id="Form1" method="post" runat="server">
   <table width="70%" align="center" border="0">
    <tr>
     <td align="center" height="25"><font style="FONT-WEIGHT: bold; FONT-SIZE: 11pt">DataGrid移动,单击变色</font></td>
    </tr>
    <tr>
     <td><asp:datagrid id="dbOrders" runat="server" Width="100%" AllowSorting="True" BorderColor="#93BEE2"
       BorderStyle="None" AutoGenerateColumns="False" AllowPaging="True">
       <AlternatingItemStyle HorizontalAlign="Center" BackColor="#CCFFFF"></AlternatingItemStyle>
       <ItemStyle Font-Size="X-Small" HorizontalAlign="Center" Height="25px"></ItemStyle>
       <HeaderStyle Font-Size="X-Small" Font-Bold="True" HorizontalAlign="Center" Height="25px" BackColor="#6699FF"></HeaderStyle>
       <Columns>
        <asp:BoundColumn DataField="OrderID" ReadOnly="True" HeaderText="订单编号"></asp:BoundColumn>
        <asp:BoundColumn DataField="CustomerID" SortExpression="CustomerID" HeaderText="CustomerID"></asp:BoundColumn>
        <asp:BoundColumn DataField="OrderDate" SortExpression="OrderDate" HeaderText="OrderDate"></asp:BoundColumn>
        <asp:BoundColumn DataField="ShipCity" HeaderText="运输城市"></asp:BoundColumn>
        <asp:BoundColumn DataField="ShipCountry" HeaderText="运输国家"></asp:BoundColumn>
        <asp:BoundColumn DataField="ShipRegion" HeaderText="运输区域"></asp:BoundColumn>
       </Columns>
       <PagerStyle HorizontalAlign="Center" Mode="NumericPages"></PagerStyle>
      </asp:datagrid></td>
    </tr>
   </table>
  </form>
</body>
</HTML>

CS代码:

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
namespace NetTest.DataGridExample
{
/// <summary>
/// DataGridColor 的摘要说明。
/// </summary>
public class DataGridColor : System.Web.UI.Page
{
  protected System.Web.UI.WebControls.DataGrid dbOrders;
  private string strConn=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"].ToString();
  private void Page_Load(object sender, System.EventArgs e)
  {
   if(!IsPostBack)
   {
    ViewState["SortExpression"]="";
    ViewState["sort"]="desc";

   }
   BindData();
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }

  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {
   this.dbOrders.ItemCreated += new System.Web.UI.WebControls.DataGridItemEventHandler(this.dbOrders_ItemCreated);
   this.dbOrders.PageIndexChanged += new System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.dbOrders_PageIndexChanged);
   this.dbOrders.SortCommand += new System.Web.UI.WebControls.DataGridSortCommandEventHandler(this.dbOrders_SortCommand);
   this.dbOrders.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.dbOrders_ItemDataBound);
   this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

  private void BindData()
  {
   SqlConnection Conn=new SqlConnection(strConn);
   SqlCommand Cmd=new SqlCommand("select * from Orders",Conn);
   SqlDataAdapter da=new SqlDataAdapter();
   da.SelectCommand=Cmd;
   DataSet ds=new DataSet();
   Conn.Open();
   da.Fill(ds);
   Conn.Close();
   DataTable dt=ds.Tables[0];
   if(ViewState["SortExpression"].ToString()!="")
   {
    dt.DefaultView.Sort=ViewState["SortExpression"].ToString()+" "+ViewState["sort"].ToString();
   }

   dbOrders.DataSource=dt;
   dbOrders.DataBind();
  }

  private void dbOrders_SortCommand(object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
  {
   string sort=string.Empty;
   if(ViewState["SortExpression"].ToString()==e.SortExpression.ToString())
   {
    if(ViewState["sort"].ToString()=="asc")
    {
     sort="desc";
    }
    else
    {
     sort="asc";
    }
   }
   else
   {
    if(ViewState["sort"].ToString()=="asc")
    {
     sort="desc";
    }
    else
    {
     sort="asc";
    }
   }
   ViewState["sort"]=sort;
   ViewState["SortExpression"]=e.SortExpression;
   BindData();
  }

  private void dbOrders_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
  {
   if (e.Item.ItemType==ListItemType.Header)
   {
    //排序
    foreach(TableCell c in e.Item.Cells)
    {

     if (c.Controls.Count >0 && c.Controls[0].GetType().ToString()=="System.Web.UI.WebControls.DataGridLinkButton")
     {
      if (((LinkButton)c.Controls[0]).Text==(string)ViewState["SortExpression"])
      {
       Label l=new Label();
       l.Font.Name="Webdings";
       if ((string)ViewState["sort"]=="asc")
        l.Text="5";
       else
        l.Text="6";
       c.Controls.Add(l);
      }
     }
    }
   }
  }

  private void dbOrders_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
  {
   dbOrders.CurrentPageIndex=e.NewPageIndex;
   DataBind();
  }

  private void dbOrders_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
  {
   if(e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.AlternatingItem)
   {
    e.Item.Attributes.Add("onmouseover","tdOver(this)");
    e.Item.Attributes.Add("onmouseout","tdOut(this)");
    e.Item.Attributes.Add("onclick","tdColor(this)");
    e.Item.Attributes.Add("ondblclick","tdColorDbl(this)");
   }
  }
}
}

实例下载:DataGridColor.rar

刷新页面返回顶部

一个人的天空

公告

DataGrid单元格移动变色,点击变色,双击取消颜色,排序.