Display标签功能扩展--添加列宽调整功能

wallimn

浏览: 5112452 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

CSS maven J#JavaScript F#

　　Display是很有名的表现层标签，方便快捷，效率不错，相信很多人都用过。最近拿来正式研究了一下，发现它缺少一个目前很流行的特点：表格列宽可调整。扩充这个功能比较容易想到的办法是，修改标签的源码，增加相应的控制代码。这样做有个不好的地方，就是，当标签升级的时候有些不容易处理。

　　另一种方式，就是使用javascript结果DOM控制技术，在页面上直接添加相应的代码。

　　代码比较简单，还简单加了几句注释，不进行过多讲解了。需要说明的是，只写了几句简单的代码，没有考虑多浏览器支持支持的问题；当表头有排序链接的时候，会把表头撑成两行，这是由于display.css文件中，对于sortable类的定义为宽度100%的block模式，可将宽度修改成99%来解决（解决得不是很优雅）。

　　将代码存成jsp文件，放到display例子上下文中就可以了。

　　代码如下：

 < %@ page  language = "java"   pageEncoding = "GB18030"
      import = "java.util.*,org.displaytag.sample.*" % >
 < %@ taglib  uri = "http://displaytag.sf.net/el"   prefix = "display" % >
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 < html   xmlns = "http://www.w3.org/1999/xhtml" >
 < head >
 < title > 表格标签测试样例(作者：wallimn，电邮：wallimn@sohu.com) </ title >
 < style   type = "text/css"   media = "all" >
 @import url("css/maven-base.css");
 @import url("css/maven-theme.css");
 @import url("css/site.css");
 @import url("css/screen.css");
 </ style >
 < style   type = "text/css" >
 .ghr {
     display: block;
     cursor: col-resize;
     width: 2px;
     padding: 0px;
     margin: 2px 0px 0px 0px;
     height: 10px;
     font-size: 1px;
     float: right;
     position: relative;
     right: 0px;
     z-index: 2;
 }
 .debug {
     border: 1px solid red;
 }
 </ style >
 </ head >
 < body >
 < %
     request.setAttribute("test", new ReportList(20));
 % >
 < h2 > 以外挂JS代码的方式，实现Display标签形成的表格列宽可控 </ h2 >
 < display:table   name = "test"   class = "Mars"   style = "width:600"   id = "mytab" >
      < display:column   property = "amount"   title = "账号"   style = "width:200"   />
      < display:column   property = "project" />
      < display:column   property = "task"   />
      < display:column   property = "count"   />
      < display:column   property = "city"   title = "城市"   />
 </ display:table >
 < script   type = "text/javascript" >
     //这个函数没有使用，开始测试时使用的。
     function OldMethod(){
         var  tables  =  document .getElementsByTagName("table");
         var ctrlObj;
         if (tables) {
             for ( var  i  =  0 ; i  <   tables.length ; i++) {
                 if (tables[i].className) {
                     var  ths  =  tables [i].getElementsByTagName("th");
                     for ( var  j  =  0 ; j  <   ths.length ; j++) {
                         ths[j].insertBefore(CreateHeadCtrl(),ths[j].firstChild);
                     }
                 }
             }
         }
     }
     //创建用于拖动控制的元素
     function CreateHeadCtrl() {
         var  f  =  document .createElement("font");
         // f.className  =  "ghr debug" ;
          f.className  =  "ghr" ;
          f.onmousedown  =  MouseDownToResize ;
          f.onmouseup  =  MouseUpToResize ;
          f.onmousemove  =  MouseMoveToResize ;
         return f;
     }
     //添加控制元素的代码
     function applyCtrl(tableId){
         var  table  =  document .getElementById(tableId);
         if (table) {
             var  ths  =  table .getElementsByTagName("th");
             for ( var  j  =  0 ; j  <   ths.length ; j++) {
                 ths[j].insertBefore(CreateHeadCtrl(),ths[j].firstChild);
             }
         }
     }
     //此处为表格添加控制元素。
     applyCtrl("mytab");
     function MouseDownToResize() {
         //alert(obj.outerHTML);
          obj  =  this ;
          obj.mouseDownX  =  event .clientX;//鼠标点击的坐标
          obj.pareneTdW  = (obj.parentElement.offsetWidth) ? obj.parentElement.offsetWidth : 100;//原TD的宽   
         obj.setCapture();
         return false;
     }
     
     function MouseMoveToResize() {
          obj  =  this ;
         if (!obj.mouseDownX)
             return false;
         var  newWidth  =  obj .pareneTdW * 1 + event.clientX * 1 - obj.mouseDownX;
         if (newWidth  >  0) {
              obj.parentElement.style.width  =  newWidth ;
         }
     }
     function MouseUpToResize() {
          obj  =  this ;
         obj.releaseCapture();
          obj.mouseDownX  =  0 ;
     }
 </ script >

/***********本人原创，欢迎转载，转载请保留本人信息*************/
作者：wallimn　电邮：wallimn@sohu.com　时间：2009-01-09
博客：http://blog.csdn.net/wallimn　http://wallimn.iteye.com
网络硬盘：http://wallimn.ys168.com
/***********文章发表请与本人联系，作者保留所有权利*************/

1
顶

0
踩

分享到：

豆豆趣事(二) | NBA篮球英语词汇英汉对照

2008-12-30 20:45
浏览 4716
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论