实现:
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)");
}
}
}
}
|
实例下载:DataGridColor.rar |
