解决信息列表中信息名称过长问题

07年9月12日

           正如这个题目所说,开发中会遇到这样的问题,我有两种解决办法,现在把这个问题的关键整理成简单的html页面,简单明了:

         (1)解决办法:
          test1.html

         

<% ... @ page language="java" contentType="text/html; charset=GBK"  %>
< head >
< title > 查询信息列表 </ title >
</ head >

< html >
  < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
        < tr >
        < td   width ="120" >< div  align ="center" > 频道名称 </ div ></ td >
          < td   width ="120" >< div  align ="center" > 频道描述 </ div ></ td >
          < td   width ="120" >< div  align ="center" > 操作 </ div ></ td >      
        </ tr >          
</ table >

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="我是aaaaaaaaaaaaa" >
        < div  align ="center" >
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="我是aaaaaaaaaaaaa" >
        < div  align ="center" >
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="我是aaaaaaaaaaaaa" >
        < div  align ="center" >
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >
    
</ table >    

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"   title ="我是bbbbbbbbbbb" >
        < div  align ="center" >
       bbb
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 222 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"   title ="我是cccccccccccc" >
        < div  align ="center" >
       ccc
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 333 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"   title ="我是dddddddddddddddd" >
        < div  align ="center" >
       ddd
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 444 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="我是eeeeeeeeeeeeeeeeeee" >
        < div  align ="center" >
       eee
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 555 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   


< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"   title ="我是ffffffffffffffff" >
        < div  align ="center" >
       fff
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 666 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >        
        </ td >
     </ tr >     
</ table >   

</ html >

         (2)解决办法(通过javascript控件实现):

         test2.html

  

<% ... @ page language="java" contentType="text/html; charset=GBK"  %>

< head >
< title > 查询信息列表 </ title >
</ head >
< script  Language ="JavaScript" > ...  
//***********默认设置定义.********************* 
tPopWait=50;//停留tWait豪秒后显示提示。 
tPopShow=5000;//显示tShow豪秒后关闭提示 
showPopStep=20; 
popOpacity=99; 
//***************内部变量定义***************** 
sPop=null; 
curShow=null; 
tFadeOut=null; 
tFadeIn=null; 
tFadeWaiting=null; 
document.write("<style type='text/css'id='defaultPopStyle'>"); 
document.write(".cPopText {  background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}"); 
document.write("</style>"); 
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>"); 

function showPopupText()...{
//alert("in"); 
var o=event.srcElement; 
MouseX=event.x; 
MouseY=event.y; 
if(o.alt!=null && o.alt!="")...{o.dypop=o.alt;o.alt=""}; 
        if(o.title!=null && o.title!="")...{o.dypop=o.title;o.title=""}; 
if(o.dypop!=sPop) ...{ 
sPop=o.dypop; 
clearTimeout(curShow); 
clearTimeout(tFadeOut); 
clearTimeout(tFadeIn); 
clearTimeout(tFadeWaiting); 
if(sPop==null || sPop=="") ...{ 
dypopLayer.innerHTML=""; 
dypopLayer.style.filter="Alpha()"; 
dypopLayer.filters.Alpha.opacity=0; 
} 
else ...{ 
if(o.dyclass!=null) popStyle=o.dyclass  
else popStyle="cPopText"; 
curShow=setTimeout("showIt()",tPopWait); 
} 
} 
} 
function showIt()...{ 
dypopLayer.className=popStyle; 
dypopLayer.innerHTML=sPop; 
popWidth=dypopLayer.clientWidth; 
popHeight=dypopLayer.clientHeight; 
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 
else popLeftAdjust=0; 
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 
else popTopAdjust=0; 
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; 
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; 
dypopLayer.style.filter="Alpha(Opacity=0)"; 
fadeOut(); 
} 
function fadeOut()...{ 
if(dypopLayer.filters.Alpha.opacity<popOpacity) ...{ 
dypopLayer.filters.Alpha.opacity+=showPopStep; 
tFadeOut=setTimeout("fadeOut()",1); 
} 
else ...{ 
dypopLayer.filters.Alpha.opacity=popOpacity; 
tFadeWaiting=setTimeout("fadeIn()",tPopShow); 
} 
} 
function fadeIn()...{ 
if(dypopLayer.filters.Alpha.opacity>0) ...{ 
dypopLayer.filters.Alpha.opacity-=1; 
tFadeIn=setTimeout("fadeIn()",1); 
}
} 

</ script >
< html >

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
      < tr >
        < td   width ="120" >< div  align ="center" > 频道名称 </ div ></ td >
        < td   width ="120" >< div  align ="center" > 频道描述 </ div ></ td >
        < td   width ="120" >< div  align ="center" > 操作 </ div ></ td >      
      </ tr >              
</ table >

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是aaaaaaaaaaaaaa" />
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是aaaaaaaaaaaaaa" />
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >        
        </ td >
     </ tr >
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是aaaaaaaaaaaaaa" />
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是bbbbbbbbbbbbbbbbbb" />
       bbb
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 222 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >        
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是cccccccccccccccccccc" />
       ccc
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 333 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是ddddddddddddddddddddddd" />
       ddd
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 444 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是eeeeeeeeeeeeeeeeeeeeeeeeee" />
       eee
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 555 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >        
        </ td >
     </ tr >     
</ table >   

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是ffffffffffffffffffffffff" />
       fff
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 666 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   

</ html >

 

          这两种办法的好坏:           

          这两种办法都可以解决列表中列表信息名称过长的问题,第一种办法是鼠标划到相应的名称上就出现悬浮框,鼠标移开,相应的悬浮框就立刻消失.第二种是通过javascript实现的,鼠标划到相应的名称上就出现悬浮框,鼠标移开,相应的悬浮框就慢慢消失.而且第二种办法可以改javascript来调整悬浮框的位置和显示字体的大小.但是有个小bug,就是一但有重名的名称时,这个通过javascript方法只显示一次,其它重名的就无法显示.但是第一种解决办法就不会有这样的情况.可是第一种解决办法无法控制悬浮框的位置和显示字体的大小以及悬浮框的显示时间,悬浮框的底色等等.比较这两个html页面中aaa的信息就知道了.（9月13日），今天把上面那个javascript改了一个地方，小bug问题解决了，在

function showPopupText(){
//alert("in");
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(true) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass 
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}

注意红色的部分，原来是if(o.dypop!=sPop)改成true就好了。相比之下，我还是觉得通过javascript方法实现的好一些。

       使用说明:

      

<% ...
       List  list = request.getAttribute("fileList");
       for( int i = 0 ; i < list.size() ;  i++ ) {
           String  fileName = ((TfileVO)list.get(i)).getFileName();
           if(fileName.length() >= 12  ){
                 fileName =  fileName..substring(0,12);
           }
%>
< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="<%=((TfileVO)list.get(i)).getFileName()%>" >
        < div  align ="center" >
        <% = fileName %>        
                          </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
</ table >   
<% ...
   }
} 
%>

 

       就拿一个页面来说即可,因为这两个页面的使用都是一样的.(test1.html)来说吧,假如说从List循环里取出fileName这个变量,然后判断fileName长度是否大于等于12,如果是就截取,把fileName放在下面代码紫色位置

    <td  width="120" title="<%= ((TfileVO)list.get(i)).getFileName() %>">
    <div align="center">
    <%=fileName%>   

    </div>
    </td>

然后把((TfileVO)list.get(i)).getFileName()这个变量放在上面代码红色的位置就行了,通过javascript方法实现的那个 页面也是同样原理.

   

<% ...
       List  list = request.getAttribute("fileList");
       for( int i = 0 ; i < list.size() ;  i++ ) {
           String  fileName = ((TfileVO)list.get(i)).getFileName();
           if(fileName.length() >= 12  ){
                 fileName =  fileName..substring(0,12);
           }
%>
<table width="100%" height="26" border="0" cellpadding="0" cellspacing="0" bgcolor="#D9D9D9">
         <tr>
             <td  width="120">
            <div align="center">
            <span id="name" onMouseOver="showPopupText()" title="<%=((TfileVO)list.get(i)).getFileName()%>"/>
            <%=fileName%>           

            </div>
          </td>
          <td  width="120"><div align="center">111</div></td>
          <td  width="120">
          <a href="#">查看</a>
          <a href="#">修改</a>
          <a href="#">删除</a>      
        </td>
      </tr>
 </table>  <% ...
   }
} 
%>

说得太傻瓜了,我要疯了...