20120607：gridview每行添加tooltip

其实用的是RadGrid控件啦~本来想查查RadGrid有什么自带的好方法没，结果乱七八糟没找到。。。 = =||||

网上一顿猛找资料，最后发现根本没想象中复杂，其实很好解决。。。。orz

     protected void rgSubItem_ItemDataBound( object sender, Telerik.WebControls.GridItemEventArgs e)
    {
         if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
        {
              string desc = rgSubData.MasterTableView.DataKeyValues[e.Item.ItemIndex][ " DESCRIPTION "].ToString();
             if (desc.Length > 20)
            {
                e.Item.ToolTip = desc.Substring( 0, 20)+ " ... ";
            }
             else {
                e.Item.ToolTip = desc;
            }
            ...........
        }
    }

Description是放在DataKeyNames里的字段~ 至于普通的gridview……我木有尝试，下面是一些网上找的资料

---------------------------------------------------------------------------------------------------------

1.http://blog.csdn.net/wooden_knocker/article/details/5510006

View Code

GridView中的高级ToolTip

效果如下：
20120607：gridview每行添加tooltip

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

View Code

<% @ 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

View Code

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(); ");

        }
    }
}

http://www.cnblogs.com/meiwn/articles/513851.html

3. 解决asp.net 中GridView中隐藏过长的数据(使用ToolTip)

在网页显示GridView显示数据内容太长影响布局有两种解决办法：

第一个解决办法：

/// <summary>
        /// 隐藏过长的数据事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void gvToolTip_DataBound(object sender, EventArgs e)
        {
            // 演示ToolTip，使用GridView自带的ToolTip
            for (int i = 0; i < gvToolTip.Rows.Count; i++)
            {
                gvToolTip.Rows[i].Cells[13].ToolTip = gvToolTip.Rows[i].Cells[13].Text;

//长度超过10个字符的时候隐藏显示
if (gvToolTip.Rows[i].Cells[13].Text.Length > 10)

                  //取六位数加……
                    gvToolTip.Rows[i].Cells[13].Text = gvToolTip.Rows[i].Cells[13].Text.Substring(0, 6) + "...";
            }

}

//第二个解决办法

二、写段JavaScript代码，并在页面上增加一ToolTip层
ToolTip显示代码见附件，
页面上需要作的工作是：
加载ToolTip显示函数所在的文件
<script language="javascript" type="text/javascript" src="tooltip.js" ></script>
初始化ToolTip
<body onload="javascript:initToolTips();">
增加一ToolTip层
<div id="toolTipLayer" style="position: absolute; visibility: hidden">
</div>

添加DataBound函数
protected void gvToolTip_DataBound(object sender, EventArgs e)
{
// 演示ToolTip，使用外建的Javascript函数
gvToolTip.Rows[0].Cells[3].Attributes.Add("OnMouseOver", Convert2Tooltip(gvToolTip.Rows[0].Cells[3].Text));
gvToolTip.Rows[0].Cells[3].Attributes.Add("OnMouseOut", "javascript:toolTip();");
if (gvToolTip.Rows[0].Cells[3].Text.Length > 18)
gvToolTip.Rows[0].Cells[3].Text = gvToolTip.Rows[0].Cells[3].Text.Substring(0, 15) + "...";
}

总结：

第一个解决办法：简单实用。

第二个解决办法：加有处理为它加前景背景颜色，且当鼠标鼠标移上去时立即显示

还有一个，我没有用过，不知道好使不。

1>利用网页控件的style隐藏过长的文字：

white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;

4. 换种方式的一个简单实现

1.转化成模版列

<asp:TemplateField HeaderText="功能描述">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" ToolTip='<%# Bind("FUNCTION_DESC") %>' Text='<%# TruncateString((string)DataBinder.Eval(Container, "DataItem.FUNCTION_DESC")) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

2.后台函数

        /// <summary>
        /// 截断过长的描述字段内容
        /// </summary>
        /// <param name="content"></param>
        /// <returns></returns>
        public string TruncateString(string content)
        {
            if (!string.IsNullOrEmpty(content) && content.Length > 40)
            {
                return content.Substring(0, 40) + "...";
            }
            return content;
        }

秒客网

20120607：gridview每行添加tooltip

GridView中的高级ToolTip

相关文章