Ajax实现DataGrid/DataList动态ToolTip (转自小山)

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

    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

查看全文

相关阅读:
React生命周期函数
 云效创建项目应用以及流水线的说明文档
 前端工作规范
 阮一峰前端系列教程
 js对时间戳的处理获取时间，昨天，今天，明天，时间不同格式
 当天时间小案例--时间戳，获取年月日星期时分秒
 React中构造函数constractor，为什么要用super（props）
Java8新特性——Optional类的使用(有效的避免空指针异常)
Java8新特性——新一套时间API的使用
 Java8新特性——StreamAPI 的使用

原文地址：https://www.cnblogs.com/Godblessyou/p/1012909.html

Ajax实现DataGrid/DataList动态ToolTip (转自 小山)

Ajax实现DataGrid/DataList动态ToolTip (转自小山)