GridView中的高级ToolTip

效果如下：

实现的效果是由于单条记录需要了解的信息过多使DataGrid中摆放不下时的解决方案，首先将记录的一部分信息进行分类将重要的信息进行保留显示，将相关信息列隐藏掉，在鼠标移动到DataGrid中相应的记录中时，会出现一个跟随鼠标的ToolTip将相关信息显示在其中。
实现原理是在HTML中隐藏一个放在DIV标签中的Table，然后在分别通过鼠标的onmouseover和onmouseout事件实现在鼠标移动到不同的记录时显示不同记录的ToolTip信息，通过onmousemove事件实现ToolTip的跟随事件。
代码如下：
Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%--
不知道为什么如果不注释这一句的话，当页面滚动的时候，ToolTip就定位不正确，document.body.scrollTop这个的值始终为0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
--%>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
         .transparent { BORDER-RIGHT: indianred 1px solid; BORDER-TOP: indianred 1px solid; DISPLAY: none; FILTER: alpha(opacity=85); BORDER-LEFT: indianred 1px solid; BORDER-BOTTOM: indianred 1px solid; POSITION: absolute; BACKGROUND-COLOR: infobackground }
     </style>
<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>

</head>
<body>
    <form id="form1" runat="server">

         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" GridLines="Horizontal" OnRowDataBound="GridView1_RowDataBound">
            <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
            <Columns>
                <asp:BoundField DataField="CustomerID" HeaderText="客户ID" ReadOnly="True" SortExpression="CustomerID" />
                <asp:BoundField DataField="CompanyName" HeaderText="公司名称" SortExpression="CompanyName" />
                <asp:BoundField DataField="ContactName" HeaderText="联系称谓" SortExpression="ContactName" />
            </Columns>
            <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
            <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
            <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
            <AlternatingRowStyle BackColor="#F7F7F7" />
        </asp:GridView>
               <div id="Popup" class="transparent" style=" Z-INDEX: 200">

                             <table border="0" cellpadding="0" style="font-size:x-small" width="200px">
                             <tr>
                             <td valign ="middle" bgcolor="gray"><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>

    </form>


        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT  * FROM [Customers]"></asp:SqlDataSource>

</body>
</html>

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType==DataControlRowType.DataRow)
        {
           DataRowView dv=(DataRowView)e.Row.DataItem;



            //如果要使鼠标移到每行的每个单元格都显示就把e.Row.Cells[0].Attributes.Add换成e.Row.Attributes.Add
           e.Row.Cells[0].Attributes.Add("onmouseover", "this.oldcolor=this.style.backgroundColor;this.style.backgroundColor='#C8F7FF';this.style.cursor='hand';");
            e.Row.Cells[0].Attributes.Add("onmousemove", "Show('" + dv["country"].ToString().Replace("'",@"\'") + "','" + dv["City"].ToString().Replace("'",@"\'") + "','" + dv["Address"].ToString() .Replace("'",@"\'")+ "','" + dv["PostalCode"].ToString() + "','" + dv["Phone"].ToString() + "','" + dv["Fax"].ToString() + "');");


            e.Row.Cells[0].Attributes.Add("onmouseout", "this.style.backgroundColor=this.oldcolor;Hide();");

        }
    }
}

posted on 2006-09-25 10:51 努力学习.NET 阅读(2474) 评论(2) 收藏举报

刷新页面返回顶部

meiwn

导航

公告

GridView中的高级ToolTip