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

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

你可能感兴趣的:(datagrid)