• 使用GridView自带的ToolTip隐藏过长的数据


    /* 编 写 人:sufei
                 * 编写时间:2009年3月5日上午
                 *使用GridView自带的ToolTip隐藏过长的数据
                */
                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;
  • 相关阅读:
    创建大顶堆
    大顶堆的实现
    二叉树的前序,中序,后序,层序实现
    链表实现多项式相加
    225. Implement Stack using Queues
    232. Implement Queue using Stacks
    JavaScript 实现队列操作
    Vue 路由守卫
    回文数 & {}[]() 符号判断

  • 原文地址:https://www.cnblogs.com/sufei/p/1486007.html
Copyright © 2020-2023  润新知