Ajax实现DataGrid/DataList动态ToolTip
1.建立一aspx页面,html代码2.cs代码
using System.IO;
{
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.数据库脚本
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
<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")%>);" οnmοuseοut="kill();" src='<%# DataBinder.Eval(Container.DataItem, "Path") %>' height='150'/>
</ItemTemplate>
</asp:DataList>
</div>
</Form>
</body>
</html>
Ajax实现DataGrid/DataList动态ToolTip相关推荐
- DataGrid/DataList
很久以前就想写一些关于DataGrid/DataList的东西,但是一直以来,一方面自感所学未深,另一方面,总觉无从下笔,一拖再拖,离刚开始的念头已距一年有余. DataGrid/DataList在A ...
- DataGrid/DataList在ASP.NET中应用
DataGrid/DataList在ASP.NET中的重要性,想必就不用我再强调了,凡显示Table类型的数据,大多会使用这两个控件(当然,如果谁还像ASP那样写ASP.NET,那我也没有办法),所以 ...
- Echarts 表格通过ajax异步请求实现动态赋值(分析同比环比的实现)
Echarts 表格通过ajax异步请求实现动态赋值(分析同比环比的实现) 对于ElementUI中使用ECharts在上一篇文章中已经说明具体使用方法 一.效果图:(以每一个月的工业产值为例) 我们 ...
- ajax获取网页新闻,基于Ajax的新闻网页动态数据的抓取方法及系统
主权项: 1.基于Ajax的新闻网页动态数据的抓取方法,其特征是,包括如下步骤:步骤(101):建立新闻网页爬取内容数据库,设置新闻网页爬取内容数据库的编码方式:获得待抓取新闻网页的新闻列表页面的UR ...
- 利用Ajax实现DataGrid无刷新分页(AjaxGrid)【转】
利用Ajax实现DataGrid无刷新分页(AjaxGrid) DataGrid功能强大,我们只用写几行代码就能够实现复杂的页面数据显示.数据多的时候免不了要分页显示,DataGrdi本身自带分页功能 ...
- 自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
- 简单爬取微博评论详细解析,学习爬取ajax异步数据交换动态网页
爬取微博评论详细解析,学习爬取ajax异步数据交换动态网页 1.什么是ajax异步数据交换网页 2.用到的工具模块和简单解释 3.网页内容解析 4.代码实现及解释 1.什么是ajax异步数据交换网页 ...
- 通用分页控件(DataGrid,DataList,Repeater都可以用它来分页)
1.建立用户控件Pager.ascx 1.1 html <script language="javascript"> function callButt ...
- easyui datagrid 表格动态隐藏部分列的展示
1.一套代码中,可能不同的项目情况都在用,但是可能不同的项目要求展示的datagrid列的内容并不一致,所以能够动态的显示部分datagrid列的内容. 即datagrid的中的某一列,这个项目要求显 ...
最新文章
- 2021 年中国敏捷行业现状调查全面启动
- python网络爬虫---selenium的使用
- learnByWork
- 黑马程序员之单例模式学习
- 打开本地文件_可以跨软件搜索文件?结构式检索你一定要学会!
- oracle的count的null为0,count(字段)不统计null值
- Java添零右移_为什么Java中的整数为-1零填充右移1 = 2147483647?
- excelexportentity中设置null不显示的方法_学习笔记-Java中的$符
- android获取上下文对象,如何在Android服务类中获取上下文
- SSL 1887——潜伏者
- 毕设题目:Matlab无人机飞行作业
- linux下gmt4绘制站点分布图,GMT复杂图制作教程———让作图简单的飞起来
- 为什么开发效率这么低,时间都去哪了?
- 高德地图WEB端软件应用
- 【C++】Win10设置默认程序
- 前序+中序 =〉后序
- discuz 3.1修改浏览器顶部标题 - Powered by Discuz!
- Apache Camel - 4 - Camel元素
- 计算机网络 — IPv4、子网掩码、CIDR
- C#中的方括号[](特性、属性)
热门文章
- 鸿蒙系统tee内核,厉害!鸿蒙内核的技术定位,是赶第三代微内核的潮流
- java process exit_Java Process.exitValue()中值的含义是什么?
- java 中文符号占位_java – ‘占位符’字符以避免积极比较?
- 记录Mask RCNN调整预测网格 font大小
- visual studio2010-2015编译部署caffe
- 深度学习(7)卷积神经网络
- 【opencv】(7) 图像匹配、直方图、图像均衡化
- cout 数组_C语言学习笔记(十)二维数组内存预设
- Tensorflow C++ API调用Keras模型实现RGB图像语义分割
- 利用python获取指定url在ATS中缓存对象的信息