zoukankan      html  css  js  c++  java
  • 解决asp.net 中GridView中隐藏过长的数据(使用ToolTip)

    在网页显示GridView显示数据内容太长影响布局有两种解决办法:

    第一个解决办法:

    View Code
    1 /// <summary>
    2 /// 隐藏过长的数据事件
    3 /// </summary>
    4 /// <param name="sender"></param>
    5 /// <param name="e"></param>
    6 protected void gvToolTip_DataBound(object sender, EventArgs e)
    7 {
    8 // 演示ToolTip,使用GridView自带的ToolTip
    9 for (int i = 0; i < gvToolTip.Rows.Count; i++)
    10 {
    11 gvToolTip.Rows[i].Cells[13].ToolTip = gvToolTip.Rows[i].Cells[13].Text;
    12
    13 //长度超过10个字符的时候隐藏显示
    14 if (gvToolTip.Rows[i].Cells[13].Text.Length > 10)
    15
    16 //取六位数加……
    17 gvToolTip.Rows[i].Cells[13].Text = gvToolTip.Rows[i].Cells[13].Text.Substring(0, 6) + "...";
    18 }
    19
    20 }

    //第二个解决办法

    二、写段JavaScript代码,并在页面上增加一ToolTip层
    ToolTip显示代码见附件,

    View Code
    1 页面上需要作的工作是:
    2 加载ToolTip显示函数所在的文件
    3 <script language="javascript" type="text/javascript" src="tooltip.js" ></script>
    4 初始化ToolTip
    5 <body onload="javascript:initToolTips();">
    6 增加一ToolTip层
    7 <div id="toolTipLayer" style="position: absolute; visibility: hidden">
    8 </div>
    9
    10 添加DataBound函数
    11 protected void gvToolTip_DataBound(object sender, EventArgs e)
    12 {
    13 // 演示ToolTip,使用外建的Javascript函数
    14 gvToolTip.Rows[0].Cells[3].Attributes.Add("OnMouseOver", Convert2Tooltip(gvToolTip.Rows[0].Cells[3].Text));
    15 gvToolTip.Rows[0].Cells[3].Attributes.Add("OnMouseOut", "javascript:toolTip();");
    16 if (gvToolTip.Rows[0].Cells[3].Text.Length > 18)
    17 gvToolTip.Rows[0].Cells[3].Text = gvToolTip.Rows[0].Cells[3].Text.Substring(0, 15) + "...";
    18 }

    总结:

    第一个解决办法:简单实用。

    第二个解决办法:加有处理为它加前景背景颜色,且当鼠标鼠标移上去时立即显示

    还有一个,我没有用过,不知道好使不。

    1>利用网页控件的style隐藏过长的文字:

    white-space:nowrap;
                     text-overflow:ellipsis;
                     overflow: hidden;

  • 相关阅读:
    react学习笔记一
    获取客户端时间差
    ts
    Linux学习笔记
    vuex 基本使用
    SQL入门
    ios 中倒计时计算,时间戳为NaN
    git归纳总结
    JS原型对象
    vue笔记
  • 原文地址:https://www.cnblogs.com/huicao/p/2032428.html
Copyright © 2011-2022 走看看