zoukankan
html css js c++ java
Ajax实现DataGrid/DataList动态ToolTip (转自 小山)
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
#region
property
private
string
ID
{
get
{
if
(Request[
"
ID
"
]
!=
null
&&
Request[
"
ID
"
].ToString()
!=
""
)
{
return
Request[
"
ID
"
];
}
else
{
return
""
;
}
}
}
#endregion
GetDescriptionByID
#region
GetDescriptionByID
private
void
GetDescriptionByID(
string
ID)
{
string
connStr
=
ConfigurationSettings.AppSettings[
"
ConnectionString
"
];
SqlConnection conn
=
new
SqlConnection(connStr);
string
sql
=
"
select * from testimage where userid='
"
+
ID
+
"
'
"
;
SqlCommand cmd
=
new
SqlCommand(sql, conn);
conn.Open();
SqlDataReader dr
=
cmd.ExecuteReader();
string
s
=
@"
<table cellspacing='0' cellpadding='4' width='300' height='200' border='0' id='GridView1' style='color:#333333;border-collapse:collapse;'>
"
;
if
(dr.Read())
{
s
+=
"
<tr style='color:#333333;background-color:#FFFBD6;'>
"
;
s
+=
"
<td width='50'>名称:</td>
"
;
s
+=
"
<td>
"
+
dr[
"
UserName
"
]
+
"
</td>
"
;
s
+=
"
</tr>
"
;
s
+=
"
<tr style='color:#333333;background-color:White;'>
"
;
s
+=
"
<td scope='col'>描述:</td>
"
;
s
+=
"
<td>
"
+
dr[
"
Description
"
]
+
"
</td>
"
;
s
+=
"
</tr>
"
;
}
s
+=
"
</table>
"
;
dr.Close();
conn.Close();
this
.Response.Write(s);
this
.Response.End();
}
#endregion
save image
#region
save image
protected
void
Button2_Click(
object
sender, EventArgs e)
{
Stream ImageStream;
string
Path
=
FileUpload1.PostedFile.FileName;
//
文件名称
int
Size
=
FileUpload1.PostedFile.ContentLength;
//
文件大小
string
Type
=
FileUpload1.PostedFile.ContentType;
//
文件类型
ImageStream
=
FileUpload1.PostedFile.InputStream;
byte
[] Content
=
new
byte
[Size];
int
Status
=
ImageStream.Read(Content,
0
, Size);
SqlConnection conn
=
new
SqlConnection(ConfigurationSettings.AppSettings[
"
ConnectionString
"
]);
SqlCommand comm
=
new
SqlCommand(
"
insert into testimage (UserName,Image,Path,Type,Description) values(@UserName,@Image,@Path,@Type,@Description)
"
, conn);
comm.CommandType
=
CommandType.Text;
comm.Parameters.Add(
"
@UserName
"
, SqlDbType.VarChar,
255
).Value
=
txtUserName.Text;
comm.Parameters.Add(
"
@Image
"
, SqlDbType.Image).Value
=
Content;
comm.Parameters.Add(
"
@Path
"
, SqlDbType.VarChar,
255
).Value
=
Path;
comm.Parameters.Add(
"
@Type
"
, SqlDbType.VarChar,
255
).Value
=
Type;
comm.Parameters.Add(
"
@Description
"
, SqlDbType.VarChar,
2000
).Value
=
this
.TextBox1.Text;
conn.Open();
comm.ExecuteNonQuery();
conn.Close();
}
#endregion
BindData
#region
BindData
private
void
BindData()
{
string
sql
=
"
select * from testimage
"
;
DataSet ds
=
GetDataSet(sql);
this
.DataList1.DataSource
=
ds;
this
.DataList1.DataBind();
}
#endregion
GetDataSet
#region
GetDataSet
private
DataSet GetDataSet(
string
sql)
{
string
constring
=
System.Configuration.ConfigurationSettings.AppSettings[
"
ConnectionString
"
];
SqlDataAdapter sda
=
new
SqlDataAdapter(sql, constring);
DataSet ds
=
new
DataSet();
sda.Fill(ds);
return
ds;
}
#endregion
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
查看全文
相关阅读:
Unity调试模式设置辅助线是否可见
Gizmos绘制塔防游戏网格
JS offsetparent 问题
JS 图像延迟加载
JS image对象
JS 瀑布流
JS 对象
JS node
Vue+element 实现表格的增加行、根据索引删除行的功能
Java的集合框架
原文地址:https://www.cnblogs.com/Godblessyou/p/1012909.html
最新文章
Mybatis批量插入mysql插入自身sql语句太长
SpringBoot整合kafka报could not be established. Broker may not be available.
lnmp 部署tp5项目文件
GIT提交代码的顺序
windows+go环境配置
TP 数据没有变动调用save方法失败的解决方法
Ubuntu 安装PhpStorm
Ubuntu 安装和卸载sublime
网络爬虫
反射
热门文章
静态,组合,继承
面向对象
面向对象程序设计
生成器
文件操作
函数式编程与内置函数
变量与递归函数
集合与函数
AI自动寻路
Unity有限状态机编写
Copyright © 2011-2022 走看看