Ajax实现DataGrid/DataList动态ToolTip

1.建立一aspx页面,html代码2.cs代码using System.Data.SqlClienJavaScript
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码


1.建立一aspx页面,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

 


<
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")%>);" οnmοuseοut="kill();" src='<%# DataBinder.Eval(Container.DataItem, "Path"%>' height='150'/>
         
</ItemTemplate>
      
</asp:DataList>    
    
</div>
    
</Form>
 
</body>
</html>
本文来源21aspnet,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/2779

发表评论