DataGrid中的高级ToolTip 1

实现的效果是由于单条记录需要了解的信息过多使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 >

 

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