DataGrid中的高级ToolTip

http://www.cnblogs.com/Bear-Study-Hard/archive/2005/12/26/304523.html 

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

  1 <% @ 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            
 23            //获得鼠标的X轴的坐标
 24            x = event.clientX + document.body.scrollLeft;
 25            
 26            //获得鼠标的Y轴的坐标
 27            y = event.clientY + document.body.scrollTop + 20;
 28            
 29            //显示弹出窗体
 30            Popup.style.display="block";
 31            
 32            //设置窗体的X,Y轴的坐标
 33            Popup.style.left = x;
 34            Popup.style.top = y;
 35        }
 36        
 37        //隐藏弹出窗体
 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
 63 < 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 >

  CS

 1 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
14 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
25        private void Page_Load(object sender, System.EventArgs e)
26        {
27            // 在此处放置用户代码以初始化页面
28            this.Format_DataGrid();
29        }
30
31        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
50        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        
60        /**//// <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
69        }
70        #endregion
71
72        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}