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;

  • 相关阅读:
    进度条
    html5 表单新增事件
    html5 表单的新增type属性
    html5 表单的新增元素
    html5 语义化标签
    jq 手风琴案例
    codeforces 702D D. Road to Post Office(数学)
    codeforces 702C C. Cellular Network(水题)
    codeforces 702B B. Powers of Two(水题)
    codeforces 702A A. Maximum Increase(水题)
  • 原文地址:https://www.cnblogs.com/nuaaydh/p/4392092.html
Copyright © 2011-2022 走看看