zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    python条件判断之直接加数字
    pythontip题目解答
    twitter api取出的日期格式化
    MySQL Archive存储引擎
    Python Json序列化
    Python 装饰器
    Python 匿名函数
    Python 函数
    Python 字符编码
    Python 文件操作
  • 原文地址：https://www.cnblogs.com/Godblessyou/p/1779213.html
Copyright © 2011-2022 走看看