Asp.NET(c#)DataGrid鼠标悬停项改变颜色,移除恢复

最新推荐文章于 2021-09-05 00:17:00 发布

原创最新推荐文章于 2021-09-05 00:17:00 发布 · 974 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #asp.net #c# #webform #javascript #generator

本文介绍如何使用 ASP.NET 中的 DataGrid 控件，并通过 C# 和 JavaScript 实现鼠标悬停时行背景颜色的变化效果。

前台

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DataGridMouseEvent.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>WebForm1</title>

</HEAD>

<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 376px; POSITION: absolute; TOP: 88px"

runat="server"></asp:DataGrid></FONT>

</form>

</body>

</HTML>

后台

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;

namespace DataGridMouseEvent

{

/// <summary>

/// WebForm1 的摘要说明。

/// </summary>

public class WebForm1 : System.Web.UI.Page

{

protected System.Web.UI.WebControls.DataGrid DataGrid1;

private void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{

DataTable MyTable=new DataTable();

MyTable.Columns.Add(new DataColumn("Name",typeof(String)));

MyTable.Columns.Add(new DataColumn("Age",typeof(Int32)));

DataRow row1=MyTable.NewRow();

DataRow row2=MyTable.NewRow();

row1["Name"]="张三";

row1["Age"]=20;

row2["Name"]="李四";

row2["Age"]=21;

MyTable.Rows.Add(row1);

MyTable.Rows.Add(row2);

DataGrid1.Attributes.Add("ItemColor","#ffffff");

DataGrid1.Attributes.Add("AlterNateColor","oldlace");

DataGrid1.DataSource=MyTable;

DataGrid1.DataBind();

}

Web 窗体设计器生成的代码

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)

{

if(e.Item.ItemType==ListItemType.Item)

{ e.Item.Attributes.Add("bgcolor","#FFFFFF");

e.Item.Attributes.Add("onmouseover","this.bgColor='#C1D2EE'");

e.Item.Attributes.Add("onmouseout","this.bgColor=document.getElementById('DataGrid1').getAttribute('ItemColor')");

}

if(e.Item.ItemType==ListItemType.AlternatingItem)

{

e.Item.Attributes.Add("bgcolor","oldlace");

e.Item.Attributes.Add("onmouseover","this.bgColor='#C1D2EE'");

e.Item.Attributes.Add("onmouseout","this.bgColor=document.getElementById('DataGrid1').getAttribute('AlterNateColor')");

}

最早的思路是：设计时设置交替项的背景色，然后判断，如果是交替项就设置一种颜色，如果是普通项就设置一种颜色。但是发现如果提前设置交替项的颜色或者普通项的颜色那么这种方法就不管用了，所以不能提前给交替项或者普通项设置颜色，要在事件中设置颜色：{e.Item.Attributes.Add("bgcolor","oldlace");}这样后面的方法才起作用。

这里在DataGrid中加入了两个属性“ItemColor ” ， “AlterNateColor”。用来存放普通项和交替项的背景色，然后在后面的事件中使用“this.bgColor=document.getElementById('DataGrid1').getAttribute('ItemColor')”这种方法提取，我认为使用javascript这种前台的提取方式比较迅速。我原本想使用“e.Item.Attributes.Add("onmouseout","this.bgColor=/""+DataGrid1.Attributes["ItemColor"]+"/"");”这种方法的，发现这种方法需要调用后台服务器端资源，把原本可以客户端处理的东西放在了服务器处理，浪费了很多资源。再做东西的时候要多思考，那一种更好，为什么别人要使用这个。这是我从“孟子E章“哪里学来的。

在DataGrid中不论你是否设置交替项,Asp.net都会把双数项的类型设置为交替项。

------这个例子是我参考“孟子E章”的网站代码写出来的。他那里还有很多比较实用，写的很明了的代码。