解决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 οnlοad="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;
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值