Ajax实现DataGrid/DataList动态ToolTip
原帖地址：http://www.cnblogs.com/singlepine/archive/2006/05/14/399520.html
1.建立一aspx页面，html代码
<
html
>
<
head
>
<
title
>
WebForm1
</
title
>
<
style
type
="text/css"
>
.logo { POSITION: absolute }.dek { Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute }</style>
</head> <body> <Form runat="server"> <DIV class="dek" id="dek"></DIV>
<script language="javascript"> 
Xoffset=-20; Yoffset= 20; var nav,yyy=-1000; var skn=dek.style; document.onmousemove=get_mouse; //ajax var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest(id) { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "?ID="+id, true); xmlHttp.send(null); } var content; function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { content=xmlHttp.responseText; } } } //tooltip function popup(id) { startRequest(id); yyy=Yoffset; document.all("dek").innerHTML=content; skn.visibility="visible" } function get_mouse(e) { var x=event.x+document.body.scrollLeft; skn.left=x+Xoffset; var y=event.y+document.body.scrollTop; skn.top=y+yyy; } function kill() { yyy=-1000; skn.visibility="hidden"; }</script> <div> <asp:FileUpload ID="FileUpload1" runat="server" /><br>名称:<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br> 描述:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br> <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="保存" /> <asp:DataList id="DataList1" BorderColor="black" CellPadding="1" CellSpacing="4" HorizontalAlign="Center" RepeatColumns="4" RepeatLayout="Table" runat="server" ShowFooter="true" ShowHeader="true" width="100%"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "UserName")%><br> <img ID="img1" onmouseover="popup(<%# DataBinder.Eval(Container.DataItem, "UserID")%>);" onmouseout="kill();" src='<%# DataBinder.Eval(Container.DataItem, "Path") %>' height='150'/> </ItemTemplate> </asp:DataList> </div> </Form> </body></html>
2.cs代码
using
System.Data.SqlClient;
using
System.IO;
protected
void
Page_Load(
object
sender, EventArgs e)
{ if (!Page.IsPostBack) { BindData(); } if (ID != "") { GetDescriptionByID(ID); } 
}
property
GetDescriptionByID
save image
BindData
GetDataSet
3.数据库脚本
if
exists
(
select
*
from
dbo.sysobjects
where
id
=
object_id
(N
'
[dbo].[TestImage]
'
)
and
OBJECTPROPERTY
(id, N
'
IsUserTable
'
)
=
1
)
drop
table
[
dbo
]
.
[
TestImage
]
GO
CREATE
TABLE
[
dbo
]
.
[
TestImage
]
(
[
UserID
]
[
int
]
IDENTITY
(
1
,
1
)
NOT
NULL
,
[
UserName
]
[
nvarchar
]
(
500
) COLLATE Chinese_PRC_CI_AS
NULL
,
[
Image
]
[
image
]
NULL
,
[
Path
]
[
nvarchar
]
(
500
) COLLATE Chinese_PRC_CI_AS
NULL
,
[
Type
]
[
nvarchar
]
(
20
) COLLATE SQL_Latin1_General_CP1_CI_AS
NULL
,
[
Description
]
[
nvarchar
]
(
2000
) COLLATE Chinese_PRC_CI_AS
NULL
)
ON
[
PRIMARY
]
TEXTIMAGE_ON
[
PRIMARY
]
GO