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