实现: 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表. |
![](https://xiyurui.cnblogs.com/admin/博客园%20-%20一个人的天空%20-%20DataGrid单元格移动变色,点击变色,双击取消颜色,排序.files/DataGridColor.gif) |
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)"); } } } } | |
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=597362