DataGrid中的高级ToolTip
生活随笔
收集整理的這篇文章主要介紹了
DataGrid中的高级ToolTip
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
??????? 實現的效果是由于單條記錄需要了解的信息過多使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 ?1using?System;
?2using?System.Collections;
?3using?System.ComponentModel;
?4using?System.Data;
?5using?System.Data.SqlClient;
?6using?System.Drawing;
?7using?System.Web;
?8using?System.Web.SessionState;
?9using?System.Web.UI;
10using?System.Web.UI.WebControls;
11using?System.Web.UI.HtmlControls;
12using?System.Configuration;
13
14namespace?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}
??????? 實現原理是在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 ?1using?System;
?2using?System.Collections;
?3using?System.ComponentModel;
?4using?System.Data;
?5using?System.Data.SqlClient;
?6using?System.Drawing;
?7using?System.Web;
?8using?System.Web.SessionState;
?9using?System.Web.UI;
10using?System.Web.UI.WebControls;
11using?System.Web.UI.HtmlControls;
12using?System.Configuration;
13
14namespace?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}
轉載于:https://www.cnblogs.com/Bear-Study-Hard/archive/2005/12/26/304523.html
總結
以上是生活随笔為你收集整理的DataGrid中的高级ToolTip的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： error LNK2001: unres
- 下一篇： C#中Cache的使用