DataGrid中的高级ToolTip 1

时间 2020-01-10

标签 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

< meta name ="GENERATOR" Content ="Microsoft Visual Studio .NET 7.1" >
7

< meta name ="CODE_LANGUAGE" Content ="C#" >
8

< meta name ="vs_defaultClientScript" content ="JavaScript" >
9

< meta name ="vs_targetSchema" content ="http://schemas.microsoft.com/intellisense/ie5" >
10

< style type ="text/css" >
11

.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

< script language ="javascript" >
14

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 >