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;

  • 相关阅读:
    Centos7 tomcat 启动权限
    Tomcat下post请求大小设置
    postgres安装时locale的选择
    flink 1.11.2 学习笔记(1)-wordCount
    prometheus学习笔记(3)-使用exporter监控mysql
    prometheus学习笔记(2)-利用java client写入数据
    mock测试及jacoco覆盖率
    shading-jdbc 4.1.1 + tk.mybatis + pagehelper 1.3.x +spring boot 2.x 使用注意事项
    prometheus学习笔记(1)-mac单机版环境搭建
    redis数据类型HyperLogLog的使用
  • 原文地址:https://www.cnblogs.com/nuaaydh/p/4392092.html
Copyright © 2011-2022 走看看