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

查看全文

相关阅读:
linux 解压tgz 文件指令
 shell 脚本没有执行权限报错 bash: ./myshell.sh: Permission denied
linux 启动solr 报错 Your Max Processes Limit is currently 31202. It should be set to 65000 to avoid operational disruption.
远程查询批量导入数据
 修改 MZTreeView 赋权节点父节点选中子节点自动选中的问题
 关于乱码的问题解决记录
 我的网站优化之路
 对设计及重构的一点反思
 我的五年岁月
 奔三的路上

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

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

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