在 Spket IDE 1.6.4 中使用 Ext 2.0

最新推荐文章于 2022-12-23 23:28:40 发布

冷月宫主

最新推荐文章于 2022-12-23 23:28:40 发布

阅读量2k

点赞数

文章标签： ide ext javascript object 工作 div

本文链接：https://blog.csdn.net/E_wsq/article/details/2260349

版权

在网页显示时，经常遇到表格或Gridview，Datalist等中数据字段太长的问题。基本办法有两种：1，换行显示；2，先隐藏一部分，当鼠标移动到其位置时，自动将全部内容的显示出来。本文主要讲述如何采用ToolTip实现第二种解决办法。
其中第一种办法，不建议采用，其原因：1，破坏整体布局；2，如果内容是一个连串的单词就不会自动换行，手动有会过于麻烦，经常考虑不周。
第二种的解决办法，有多种具体的实现办法：

一、使用GridView自带ToolTip属性。
在GridView中添加DataBound方法，并为需要的Cell设定ToolTip，再隐藏显示字段即可。

protected void gvToolTip_DataBound(object sender, EventArgs e) 
    {
        // 演示ToolTip，使用GridView自带的ToolTip
	    for(int i=0; i< gvToolTip.Rows.Count; i++)
          {
        gvToolTip.Rows[i].Cells[3].ToolTip = gvToolTip.Rows[i].Cells[3].Text;
		 if (gvToolTip.Rows[i].Cells[3].Text.Length > 18)
        gvToolTip.Rows[i].Cells[3].Text = gvToolTip.Rows[i].Cells[3].Text.Substring(0, 15) + "...";
          }
    }

二、写段JavaScript代码，并在页面上增加一ToolTip层
ToolTip显示代码见附件，
页面上需要作的工作是：
加载ToolTip显示函数所在的文件
<script language="javascript" type="text/javascript" 
src="tooltip.js" ></script>
初始化ToolTip
<body 
οnlοad="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;