DataGrid中的高级ToolTip 1

最新推荐文章于 2025-09-12 22:15:02 发布

转载最新推荐文章于 2025-09-12 22:15:02 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/bearstudyhard/301188

文章标签：

#c# #javascript #ViewUI

该博客为转载内容，原链接为https://blog.51cto.com/bearstudyhard/301188 ，涉及C#和JavaScript信息技术领域。

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

@ Page language="c#" Codebehind="DataGrid中的高级ToolTip.aspx.cs" AutoEventWireup="false" Inherits="优快云Tech.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>

转载于:https://blog.51cto.com/bearstudyhard/301188