博客园  :: 首页  :: 联系 :: 订阅 订阅  :: 管理
 DataGrid单元格移动变色,点击变色,双击取消颜色,排序.

实现:
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">
   <!--
    var bColor='#ff3300'; //定义颜色,为单击时显示的颜色
    var fColor='#fafafa'; //定义颜色,为单击时字体所显示的颜色
    function tdOver(td)
    {
     if(td.style.backgroundColor!=bColor)//当这一列的背景颜色不为以上定义的颜色时
     {
      td.setAttribute('DtBg',td.style.backgroundColor);//得到这列的背景颜色并且设置为DtBg
      td.setAttribute('DtCo',td.style.color);//得到这列的字体颜色并且设置为DtCo
      
      td.style.color='#ff66cc';//设置鼠标移上时列里的字体颜色为#ff99ff
      td.style.cursor='hand';//设置鼠标的形状为手状
      td.style.backgroundColor='#66cc66';//设置该列的背景颜色为#66cc66
     }
    }
    function tdOut(td)
    {
     if(td.style.backgroundColor!=bColor)//当这一列的背景颜色不为以上定义的颜色时
     {
      td.style.backgroundColor=td.getAttribute('DtBg');//设置该列的背景颜色为以上得到的颜色,即DtBg
      td.style.color=td.getAttribute('DtCo');//设置该列的背景颜色为以上得到的颜色,即DtCo
     }
    }
    function clearTdColor(tdc)
    {
     var tdColl=document.all.tags('TR');//得到所有的行
     bc=tdc.getAttribute('Dtbg');//得到该列的背景颜色(在tdOver方法中setAttribute)
     cc=tdc.getAttribute('DtCo');//得到该列的字体颜色(在tdOver方法中setAttribute)
     for(i=0;i<tdColl.length;i++)//循环行
     {
      whichTD=tdColl(i);//得到当前的行
      if(whichTD.style.backgroundColor==bColor)//如果该单元格为开始时设置的颜色,即bColor
      {
       //说明:如果你的DataGrid不分普通列和交替列,则使用以下代码,清除颜色
       
       /*whichTD.style.backgroundColor=bc;//设置该单元格的颜色为得到的颜色
       whichTD.style.color=cc;//设置该单元格的字体颜色为得到的颜色
       whichTD.style.fontWeight='';
       break;*/
       
       //如果你的DataGrid分普通列和交替列,而且交替列有颜色,则使用以下代码,清除颜色
       //提示:使用的时候注意一下以下的判断,根据自己的实际情况取模判断可能要交换一下.
       if(i%2!=0) //表示是普通列,因为没有颜色,所以下面的颜色为""
       {
        whichTD.style.backgroundColor="";  
        whichTD.style.color="";
        whichTD.style.fontWeight='';
        break;
       }
       else   //表示是交替列,根据你的DataGrid交替列的颜色而设置下面的backgroundColor
       {
        whichTD.style.backgroundColor="#CCFFFF"; //#CCFFFF为设置的DataGrid交替项的颜色(可以根据自己的需要修改)
        whichTD.style.color="";
        whichTD.style.fontWeight='';
        break;
       }
      }
     }
    }
    function tdColor(tdc)
    {
     clearTdColor(tdc);//首先清楚所有的颜色
     bc=tdc.getAttribute('Dtbg');//得到该列的背景颜色(在tdOver方法中setAttribute)
     cc=tdc.getAttribute('DtCo');//得到该列的字体颜色(在tdOver方法中setAttribute)
     tdcs=tdc.style.backgroundColor;//得到该列当前的颜色(即鼠标移至单元格时的颜色)
     if(event.srcElement.tagName!='A')//event.srcElement.tagName就是触发的单元格的名称,即TD
     {
      if(tdcs!=bColor)//如果该列的当前颜色不等于开始是定义的颜色时
      {
       tdc.style.backgroundColor=bColor;//设置背景颜色为开始定义的颜色
       tdc.style.color=fColor;//设置背景颜色为开始定义的字体颜色
       tdc.style.fontWeight='500';
      }
      else
      {
       tdc.style.backgroundColor=bc;//设置背景颜色(为在tdOver方法中setAttribute)
       tdc.style.color=cc;//设置背景颜色为(在tdOver方法中setAttribute)
       tdc.style.fontWeight='';
      }
     }
    }
    function tdColorDbl(tdc)//清除该列的颜色
    {
     clearTdColor(tdc);
    }
   -->
  </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)");
   }
  }
 }
}

http://sunnystar365.cnblogs.com/archive/2005/12/14/296691.aspx