DataGrid中的高级ToolTip

实现的效果是由于单条记录需要了解的信息过多使DataGrid中摆放不下时的解决方案，首先将记录的一部分信息进行分类将重要的信息进行保留显示，将相关信息列隐藏掉，在鼠标移动到DataGrid中相应的记录中时，会出现一个跟随鼠标的ToolTip将相关信息显示在其中。
实现原理是在HTML中隐藏一个放在DIV标签中的Table，然后在分别通过鼠标的onmouseover和onmouseout事件实现在鼠标移动到不同的记录时显示不同记录的ToolTip信息，通过onmousemove事件实现ToolTip的跟随事件。
代码如下：
HTML

<%@ Page language="c#" Codebehind="DataGrid中的高级ToolTip.aspx.cs" AutoEventWireup="false" Inherits="CSDNTech.DataGrid中的高级ToolTip" %>
2

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

<HTML>
4

<HEAD>
5

<title>DataGrid中的高级ToolTip</title>
6

.transparent { BORDER-RIGHT: indianred 1px solid; BORDER-TOP: indianred 1px solid; DISPLAY: none; FILTER: alpha(opacity=85); BORDER-LEFT: indianred 1px solid; BORDER-BOTTOM: indianred 1px solid; POSITION: absolute; BACKGROUND-COLOR: infobackground }
12

</style>
13

function Show(Country, City, Address, PostalCode, Phone, Fax)
15

{
16

document.getElementById("td1").innerText="国家："+Country;
17

document.getElementById("td2").innerText="城市："+City;
18

document.getElementById("td3").innerText="地址："+Address;
19

document.getElementById("td4").innerText="邮政编码："+PostalCode;
20

document.getElementById("td5").innerText="电话："+Phone;
21

document.getElementById("td6").innerText="传真："+Fax;
22

//获得鼠标的X轴的坐标
24

x = event.clientX + document.body.scrollLeft;
25

//获得鼠标的Y轴的坐标
27

y = event.clientY + document.body.scrollTop + 20;
28

//显示弹出窗体
30

Popup.style.display="block";
31

//设置窗体的X,Y轴的坐标
33

Popup.style.left = x;
34

Popup.style.top = y;
35

}
36

//隐藏弹出窗体
38

function Hide()
39

{
40

//隐藏窗体
41

Popup.style.display="none";
42

}
43

</script>
44

</HEAD>
45

<body>
46

<form id="Form1" method="post" runat="server">
47

<TABLE id="Table1" cellSpacing="3" cellPadding="3" width="300" border="0">
48

<TR>
49

<TD>
50

<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False" AllowPaging="True">
51

<Columns>
52

<asp:BoundColumn DataField="CustomerID" HeaderText="CustomerID"></asp:BoundColumn>
53

<asp:BoundColumn DataField="CompanyName" HeaderText="CompanyName"></asp:BoundColumn>
54

<asp:BoundColumn DataField="ContactTitle" HeaderText="ContactTitle"></asp:BoundColumn>
55

<asp:BoundColumn DataField="Address" HeaderText="Address"></asp:BoundColumn>
56

<asp:BoundColumn DataField="City" HeaderText="City"></asp:BoundColumn>
57

<asp:BoundColumn DataField="PostalCode" HeaderText="PostalCode"></asp:BoundColumn>
58

<asp:BoundColumn DataField="Country" HeaderText="Country"></asp:BoundColumn>
59

<asp:BoundColumn DataField="Phone" HeaderText="Phone"></asp:BoundColumn>
60

<asp:BoundColumn DataField="Fax" HeaderText="Fax"></asp:BoundColumn>
61

</Columns>
62

<PagerStyle Mode="NumericPages">
64

</PagerStyle>
65

</asp:DataGrid></TD>
66

</TR>
67

<TR>
68

<TD>
69

<div id="Popup" class="transparent" style=" Z-INDEX: 200">
70

<table border="0" cellpadding="0" style="FONT-SIZE: x-small">
71

<tr>
72

<td valign="middle" bgcolor="indianred"><font color="white">联系方式</font></td>
73

</tr>
74

<tr>
75

<td id="td1"></td>
76

</tr>
77

<tr>
78

<td id="td2"></td>
79

</tr>
80

<tr>
81

<td id="td3"></td>
82

</tr>
83

<tr>
84

<td id="td4"></td>
85

</tr>
86

<tr>
87

<td id="td5"></td>
88

</tr>
89

<tr>
90

<td id="td6"></td>
91

</tr>
92

</table>
93

</div>
94

</TD>
95

</TR>
96

<TR>
97

<TD></TD>
98

</TR>
99

</TABLE>
100

</form>
101

</body>
102

</HTML>

using System;
2

using System.Collections;
3

using System.ComponentModel;
4

using System.Data;
5

using System.Data.SqlClient;
6

using System.Drawing;
7

using System.Web;
8

using System.Web.SessionState;
9

using System.Web.UI;
10

using System.Web.UI.WebControls;
11

using System.Web.UI.HtmlControls;
12

using System.Configuration;
13

namespace CSDNTech
15

{
16

/// <summary>
17

/// DataGrid中的高级ToolTip 的摘要说明。
18

/// </summary>
19

public class DataGrid中的高级ToolTip : System.Web.UI.Page
20

{
21

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

protected string Conn = ConfigurationSettings.AppSettings["DBConn"];
23

private DataTable dt;
24

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

{
27

// 在此处放置用户代码以初始化页面
28

this.Format_DataGrid();
29

}
30

private void Format_DataGrid()
32

{
33

SqlConnection cn = new SqlConnection(Conn);
34

cn.Open();
35

try
36

{
37

SqlCommand com = new SqlCommand("select Top 16 CustomerID, CompanyName, ContactTitle,Country, City, Address,PostalCode,Phone,Fax from Customers",cn);
38

SqlDataAdapter adp = new SqlDataAdapter(com);
39

dt = new DataTable();
40

adp.Fill(dt);
41

this.DataGrid1.DataSource = dt;
42

this.DataGrid1.DataBind();
43

}
44

finally
45

{
46

cn.Close();
47

}
48

}
49

#region Web 窗体设计器生成的代码
51

override protected void OnInit(EventArgs e)
52

{
53

//
54

// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
55

//
56

InitializeComponent();
57

base.OnInit(e);
58

}
59

/// <summary>
61

/// 设计器支持所需的方法 - 不要使用代码编辑器修改
62

/// 此方法的内容。
63

/// </summary>
64

private void InitializeComponent()
65

{
66

this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
67

this.Load += new System.EventHandler(this.Page_Load);
68

}
70

#endregion
71

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

{
74

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

{
76

e.Item.Attributes.Add("onmouseover", "this.oldcolor=this.style.backgroundColor;this.style.backgroundColor='#C8F7FF';");
77

e.Item.Attributes.Add("onmousemove", "Show('"+dt.Rows[e.Item.ItemIndex]["country"].ToString()+"','"
78

+dt.Rows[e.Item.ItemIndex]["City"].ToString()+"','"
79

+dt.Rows[e.Item.ItemIndex]["Address"].ToString()+"','"
80

+dt.Rows[e.Item.ItemIndex]["PostalCode"].ToString()+"','"
81

+dt.Rows[e.Item.ItemIndex]["Phone"].ToString()+"','"
82

+dt.Rows[e.Item.ItemIndex]["Fax"].ToString()+"');");
83

e.Item.Attributes.Add("onmouseout",
84

"this.style.backgroundColor=this.oldcolor;Hide();");
85

}
86

}
87

}
88

}

posted on 2006-08-10 21:26 石川阅读(215) 评论(0) 收藏举报