DataGrid中的高级ToolTip

作者:网络 来源:佚名 更新时间:2008-02-08 点击:
国内最大的酷站演示中心!
效果如下图所示:

实现原理:

     为datagrid中的每一行,绑定onmouseover、onmousemove、onmouseout事件,使的鼠标移动到行内时,自动显示一个<div>,鼠标移出该行,就把这个<div>隐藏掉。

实现代码:

     前台:

1.   定义<div>的样式:

<style type="text/css">

.transparent { filter: alpha(opacity=85);

border-top: indianred 1px solid;

border-right: indianred 1px solid; 

border-left: indianred 1px solid;

border-bottom: indianred 1px solid;

position: absolute;

background-color: infobackground;

display: none  }

</style>

2.   显示和隐藏窗体的脚本:

<script language="javascript">

     //显示弹出窗体

     function show(country, city, address, postalcode, phone, fax)

     {

         document.getelementbyid("td1").innertext="国家:"+country;

         document.getelementbyid("td2").innertext="城市:"+city;

         document.getelementbyid("td3").innertext="地址:"+address;

         document.getelementbyid("td4").innertext="邮政编码:"+postalcode;

         document.getelementbyid("td5").innertext="电话:"+phone;

         document.getelementbyid("td6").innertext="传真:"+fax;

         //获得鼠标的x轴的坐标

         x = event.clientx + document.body.scrollleft;

         //获得鼠标的y轴的坐标

         y = event.clienty + document.body.scrolltop + 20;

         //显示弹出窗体

         popup.style.display="block";

         //设置窗体的x,y轴的坐标

         popup.style.left = x;

         popup.style.top = y;

     }

//隐藏弹出窗体

function hide()

     {

         //隐藏窗体

         popup.style.display="none";

     }

</script>

3.   tooltip窗体的代码

<div id="popup" class="transparent" >

     <table border="0" cellpadding="0" >

          <tr>

<td align="middle" bgcolor="indianred"><font color="white">联系方式</font></td>

</tr>

         <tr><td id="td1"></td></tr>

         <tr><td id="td2"></td></tr>

         <tr><td id="td3"></td></tr>

         <tr><td id="td4"></td></tr>

         <tr><td id="td5"></td></tr>

         <tr><td id="td6"></td></tr>

     </table>

</div>

     后台:

private datatable dt;

private void page_load(object sender, system.eventargs e)

{

     // put user code to initialize the page here

     if(!ispostback)

     {

          sqlconnection cnn = new sqlconnection();

         cnn.connectionstring = "data source=localhost;initial catalog=northwind;password=;"

         +"persist security info=true;user id=sa;workstation id=apj062;packet size=4096";

         string sqlstr = "select top 16 customerid, companyname, contacttitle,country, city, address,postalcode,phone,fax from customers";

         cnn.open();

         sqldataadapter ad = new sqldataadapter(sqlstr,cnn);

         dt = new datatable();

         ad.fill(dt);

 

         grdcustomer.datasource = dt;

         grdcustomer.databind();

     }

}

private void grdcustomer_itemdatabound(object sender,

system.web.ui.webcontrols.datagriditemeventargs e)

{

     if(e.item.itemtype == listitemtype.alternatingitem

         || e.item.itemtype == listitemtype.item)

     {

e.item.attributes.add("onmouseover",

"this.oldcolor=this.style.backgroundcolor;this.style.backgroundcolor='#c8f7ff';");

         e.item.attributes.add("onmousemove",

"show('"+dt.rows[e.item.itemindex]["country"].tostring()+"','"

                       +dt.rows[e.item.itemindex]["city"].tostring()+"','"

                       +dt.rows[e.item.itemindex]["address"].tostring()+"','"

                       +dt.rows[e.item.itemindex]["postalcode"].tostring()+"','"

                       +dt.rows[e.item.itemindex]["phone"].tostring()+"','"

                       +dt.rows[e.item.itemindex]["fax"].tostring()+"');");

         e.item.attributes.add("onmouseout",

"this.style.backgroundcolor=this.oldcolor;hide();");

}

}