JGrid中拖动改变列宽的脚本原型

更新时间：2008年07月18日 12:57:48 作者：

JGrid 中，可以拖动改变列宽，简单的原理就是改变相应的 col 的 style.width 今天看到skybot 同学在问这个问题，就又把这个功能拿出来，单独实现了一下（有改进）

顺便，把我研究过的，如何隐藏、显示一列的方法也实现了一把。但是这个功能和 css border-collapse:collapse; 有冲突，详情见代码2

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jgrid拖动改变表格宽度</title> <style type="text/css">  </style> </head> <body> <div> <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;">     <colgroup>         <col style="width:200px;" />         <col style="width:100px;" />         <col style="width:100px;" />         <col style="width:100px;" />         <col style="width:100px;" />     </colgroup>     <tr>         <td>拖动我1</td>         <td>拖动我2</td>         <td>拖动我3</td>         <td>拖动我4</td>         <td>拖动我5</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr> </table> </div> <script language="javascript" type="text/javascript"> var JPos = {}; (function($){          $.getAbsPos = function(pTarget){         var x_ = y_ = 0;                  if(pTarget.style.position != "absolute"){                     while(pTarget.offsetParent){                     x_ += pTarget.offsetLeft;                     y_ += pTarget.offsetTop;                     pTarget = pTarget.offsetParent;             }         }             x_ += pTarget.offsetLeft;             y_ += pTarget.offsetTop;         return {x:x_,y:y_};     }          $.getEventPos = function(evt){             var _x,_y;             evt = JEvent.getEvent(evt);             if(evt.pageX || evt.pageY){                 _x = evt.pageX;                 _y = evt.pageY;             }else if(evt.clientX || evt.clientY){                 _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);                 _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);             }else{                 return $.getAbsPos(evt.target);                 }             return {x:_x,y:_y};         }          })(JPos); //======================================================================================= var JEvent = {}; (function($){     $.getEvent = function(evt){                       evt = window.event || evt;                              if(!evt){             var fun = JEvent.getEvent.caller;             while(fun != null){                 evt = fun.arguments[0];                 if(evt && evt.constructor == Event)                     break;                 fun = fun.caller;             }         }                      return evt;     }          $.doEvent = function(fun){         var args = arguments;         return function(){             return fun(args);         }     } })(JEvent); //======================================================================================= var colIndex; var dataTable = document.getElementById("dataTable"); var cols = dataTable.getElementsByTagName("COL"); var dragMask = document.createElement("DIV"); var mAWidth = mAHeight = 300; document.body.insertBefore(dragMask,document.body.lastChild); dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;"; var mask_mousemove = function(evt){     if(document.selection){//IE ,Opera         if(document.selection.empty)             document.selection.empty();//IE         else{//Opera             document.selection = null;         }     }else if(window.getSelection){//FF,Safari         window.getSelection().removeAllRanges();     }          var oPos = JPos.getAbsPos(this);     var mPos = JPos.getEventPos(evt);          var x = mPos.x - oPos.x - mAWidth / 2;     var tmpX = parseInt(cols[colIndex].style.width) + x;     dragMask.style.left = mPos.x - mAWidth / 2 + "px";     cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";     if(!document.all)         dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。 } var mask_mouseup = function(evt){     dragMask.style.display = "none"; } dragMask.onmousemove = mask_mousemove; dragMask.onmouseup = mask_mouseup; var cell_mousedown = function(evt){     colIndex = this.colIndex;     var mPos = JPos.getEventPos(evt);     with(dragMask.style){         left = mPos.x - mAWidth / 2  + "px";         top = mPos.y - mAHeight / 2 + "px";         display = "";     } } var chk_click = function(evt){     var obj = cols[this.colIndex];     if(this.checked){         obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";     }else{         obj.css_ = obj.style.cssText;         obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";     } } var i , o; var label ,chk; for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){     o.colIndex = i;     o.onmousedown = cell_mousedown;          label = document.createElement("LABEL");     document.body.insertBefore(label,document.body.lastChild);     chk = document.createElement("INPUT");     chk.type = "checkbox";     label.appendChild(chk);     chk.onclick = chk_click;     chk.colIndex = i;     chk.checked = "checked";     label.appendChild(document.createTextNode(o.innerHTML)); } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

修改版2

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jgrid拖动改变表格宽度_修改版</title> <style type="text/css">  </style> </head> <body> <div> <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">     <colgroup>         <col style="width:200px;" />         <col style="width:100px;" />         <col style="width:100px;" />         <col style="width:100px;" />         <col style="width:100px;" />     </colgroup>     <tr>         <td>拖动我1</td>         <td>拖动我2</td>         <td>拖动我3</td>         <td>拖动我4</td>         <td>拖动我5</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>         <td>&nbsp;</td>     </tr> </table> </div> <script language="javascript" type="text/javascript"> var JPos = {}; (function($){          $.getAbsPos = function(pTarget){         var x_ = y_ = 0;                  if(pTarget.style.position != "absolute"){                     while(pTarget.offsetParent){                     x_ += pTarget.offsetLeft;                     y_ += pTarget.offsetTop;                     pTarget = pTarget.offsetParent;             }         }             x_ += pTarget.offsetLeft;             y_ += pTarget.offsetTop;         return {x:x_,y:y_};     }          $.getEventPos = function(evt){             var _x,_y;             evt = JEvent.getEvent(evt);             if(evt.pageX || evt.pageY){                 _x = evt.pageX;                 _y = evt.pageY;             }else if(evt.clientX || evt.clientY){                 _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);                 _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);             }else{                 return $.getAbsPos(evt.target);                 }             return {x:_x,y:_y};         }          })(JPos); //======================================================================================= var JEvent = {}; (function($){     $.getEvent = function(evt){                       evt = window.event || evt;                              if(!evt){             var fun = JEvent.getEvent.caller;             while(fun != null){                 evt = fun.arguments[0];                 if(evt && evt.constructor == Event)                     break;                 fun = fun.caller;             }         }                      return evt;     }          $.doEvent = function(fun){         var args = arguments;         return function(){             return fun(args);         }     } })(JEvent); //======================================================================================= var colIndex; var dataTable = document.getElementById("dataTable"); var cols = dataTable.getElementsByTagName("COL"); var dragMask = document.createElement("DIV"); var mAWidth = mAHeight = 300; document.body.insertBefore(dragMask,document.body.lastChild); dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;"; var mask_mousemove = function(evt){     if(document.selection){//IE ,Opera         if(document.selection.empty)             document.selection.empty();//IE         else{//Opera             document.selection = null;         }     }else if(window.getSelection){//FF,Safari         window.getSelection().removeAllRanges();     }          var oPos = JPos.getAbsPos(this);     var mPos = JPos.getEventPos(evt);          var x = mPos.x - oPos.x - mAWidth / 2;     var tmpX = parseInt(cols[colIndex].style.width) + x;     dragMask.style.left = mPos.x - mAWidth / 2 + "px";     cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";     if(!document.all)         dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。 } var mask_mouseup = function(evt){     dragMask.style.display = "none"; } dragMask.onmousemove = mask_mousemove; dragMask.onmouseup = mask_mouseup; var cell_mousedown = function(evt){     colIndex = this.colIndex;     var mPos = JPos.getEventPos(evt);     with(dragMask.style){         left = mPos.x - mAWidth / 2  + "px";         top = mPos.y - mAHeight / 2 + "px";         display = "";     } } var chk_click = function(evt){     var obj = cols[this.colIndex];     if(this.checked){         obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";     }else{         obj.css_ = obj.style.cssText;         obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";     } } var i , o; var label ,chk; for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){     o.colIndex = i;     o.onmousedown = cell_mousedown;          label = document.createElement("LABEL");     document.body.insertBefore(label,document.body.lastChild);     chk = document.createElement("INPUT");     chk.type = "checkbox";     label.appendChild(chk);     chk.onclick = chk_click;     chk.colIndex = i;     chk.checked = "checked";     label.appendChild(document.createTextNode(o.innerHTML)); } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

ff下拖动时一大块影子是怎么产生的呢

是故意显示出来的。
把 -moz-opacity:0.1;opacity: 0.1 改掉。

JGrid
拖动

js读取json文件片段中的数据实例
下面小编就为大家带来一篇js读取json文件片段中的数据实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Cordova(ionic)项目实现双击返回键退出应用
这篇文章主要为大家详细介绍了Cordova项目实现双击返回键退出应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
webpack源码中一些精妙的方法总结
正好最近在学习webpack的源码,所以下面这篇文章主要给大家介绍了关于webpack源码中一些精妙的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-02-02
用js控制组织结构图可以任意拖拽到指定位置
用js控制生成了一个组织结构图并设置这个组织结构可以任意拖动到指定位置，具体代码如下
2014-01-01
js抽奖实现随机抽奖代码效果
这篇文章主要介绍了js随机抽奖代码效果，大家参考使用
2013-12-12
JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
这篇文章主要介绍了JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法的相关资料,需要的朋友可以参考下
2016-02-02
如何用JavaScript实现功能齐全的单链表详解
这篇文章主要给大家介绍了关于如何用JavaScript实现功能齐全的单链表的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
es6中reduce的基本使用方法
这篇文章主要给大家介绍了关于es6中reduce的基本使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用es6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
下面小编就为大家带来一篇JavaScript中解决多浏览器兼容性23个问题的快速解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
JS中的函数与对象的创建方式
这篇文章主要介绍了JS中的函数与对象的创建方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05