空地

生活，工作，记录(内容基本都是转载，自己工作用到的时候看看而已)

导航

解决Asp.net下GridView中显示数据字段文字过长的办法

 

在网页显示时，经常遇到表格或Gridview，Datalist等中数据字段太长的问题。基本办法有两种：1，换行显示；2，先隐藏一部分，当鼠标移动到其位置时，自动将全部内容的显示出来。本文主要讲述如何采用ToolTip实现第二种解决办法。
其中第一种办法，不建议采用，其原因：1，破坏整体布局；2，如果内容是一个连串的单词就不会自动换行，手动有会过于麻烦，经常考虑不周。
第二种的解决办法，有多种具体的实现办法：

一、使用GridView自带ToolTip属性。
在GridView中添加DataBound方法，并为需要的Cell设定ToolTip，再隐藏显示字段即可。

protected void gvToolTip_DataBound(object sender, EventArgs e)
                 {
                    // 演示ToolTip，使用GridView自带的ToolTip
                 for(int i=0; i< gvToolTip.Rows.Count; i++)
                       {
                     gvToolTip.Rows[i].Cells[3].ToolTip = gvToolTip.Rows[i].Cells[3].Text;
            if (gvToolTip.Rows[i].Cells[3].Text.Length > 18)
                     gvToolTip.Rows[i].Cells[3].Text = gvToolTip.Rows[i].Cells[3].Text.Substring(0, 15) + "...";
                       }
                 }


二、写段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) + "...";
            }

 

其中Convert2Tooltip为处理字符串函数，它将’转为\’，否则无法显示含’的字段

三、两种方法的比较
1. 方法一较简单，而方法二需要额外的处理
2. 方法二的优点在于它能自定义宽度，前景背景颜色，且当鼠标鼠标移上去时立即显示

当然还有一种最最简单的办法，就是利用网页控件的style隐藏过长的文字：

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

posted on 2007-11-01 12:03  小梅  阅读(580)  评论(0)    收藏  举报