zoukankan      html  css  js  c++  java
  • 使用GridView自带的ToolTip隐藏过长的数据

    使用GridView自带的ToolTip隐藏过长的数据
    2009-03-13 11:24 by 苏飞, 984 阅读, 0 评论, 收藏, 编辑

    /* 编 写 人:sufei
    * 编写时间:2009年3月5日上午
    *使用GridView自带的ToolTip隐藏过长的数据

    http://www.cnblogs.com/sufei/archive/2009/03/13/1486007.html
    */
    for (int j = 1; j < Gv_FAQ.Columns.Count; j++)
    {
    for (int i = 0; i < Gv_FAQ.Rows.Count; i++)
    {
    Gv_FAQ.Rows[i].Cells[j].ToolTip = Gv_FAQ.Rows[i].Cells[j].Text;
    //长度过八个字符的时候隐藏显示
    if (Gv_FAQ.Rows[i].Cells[j].Text.Length > 20)
    {
    Gv_FAQ.Rows[i].Cells[j].Text = Gv_FAQ.Rows[i].Cells[j].Text.Substring(0, 20) + "...";
    }
    }
    }

    注:

    把我的代码复制到你的程序中,只要把GirdView的名字改成你的gridView的名字就可以了,

    二、JavaScript 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;

  • 相关阅读:
    4、自定义菜单
    3、关注、取消关注 与 关键字回复
    2、自动回复消息
    1、接入公众平台
    java学习备忘录
    vue组件最佳实践
    js拉起或下载app
    angular1.5 Components
    Charlse 使用小记
    2016年终总结
  • 原文地址:https://www.cnblogs.com/nuaaydh/p/4392092.html
Copyright © 2011-2022 走看看