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

Web 窗体设计器生成的代码#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

}

转载于:https://www.cnblogs.com/Bear-Study-Hard/archive/2005/12/26/304523.html

DataGrid中的高级ToolTip相关推荐

在DataGrid中显示图片
兼谈 DadaGrid 模板列的创建 DadaGrid 是 ASP.NET 编程中一个很重要的控件,其优良的可定制功能为提高它的表现力提供了极大的方便.除了与数据源直接绑定以外,我们还可以通过列绑定模 ...
在DataGrid中添加一个LookUpColumn,以比较灵活地实现DictValue值代替DictID值显示.
在一个项目中,我遇到这样一个问题: 数据库字段只存储了一个字典ID1,在DataGrid中显示时,需要用相应的字典Value1来代替字典ID1显示.解决这个问题一般有两个方法: 方法1: 数据库查询 ...
DataGrid中选择列文本根据绑定数据不同显示为不同颜色的处理办法
目前在维护一个Web应用,用户提出一些对我来说要求比较高的需求,摸索了一下,终于解决了.和大家分享一下: 问题:一般DataGrid中会有部分选择列,例如: <a ...
webpack打包处理js文件中的高级语法
前言在js文件中定义一个User类 import $ from 'jquery' import './css/at.css' import './css/at.less' import './css ...
DataGrid中页导航栏的自定义样式
我们可以利用DataGrid的ItemCreat()方法来实现DataGrid中页脚(Foot)和页导航栏的自定义样式.ItemCreat,顾名思义,就是在数据项创建时发生的事件,对于DataGrid ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
Python中的高级数据结构详解
这篇文章主要介绍了Python中的高级数据结构详解,本文讲解了Collection.Array.Heapq.Bisect.Weakref.Copy以及Pprint这些数据结构的用法,需要的朋友可以参考 ...
DataGrid 中間隔色的實現
public void SetDataGridColor(System.Web.UI.WebControls.DataGrid dg,int Col) { //設置顯示已刪除記錄最後一列 ...
在WPF的DATAGRID中快速点击出现在ADDNEW或EDITITEM事务过程不允许DEFERREFRESH
在WPF的DATAGRID中快速点击出现在ADDNEW或EDITITEM事务过程不允许DEFERREFRESH 原文在WPF的DATAGRID中快速点击出现在ADDNEW或EDITITEM事务过程不 ...

DataGrid中的高级ToolTip

DataGrid中的高级ToolTip相关推荐

最新文章

热门文章