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
拖动

利用JavaScript实现的10种排序算法总结
这篇文章主要介绍了利用JavaScript实现的十种排序算法，主要介绍了冒泡，选择，插入，希尔，归并，快速，堆排，计数，桶排和基数，有感兴趣的小伙伴可以参考阅读本文
2023-05-05
javascript 页面跳转方法集合
js 中实现页面跳转的方法(window.location和window.open的区别)
2009-03-03
js如何将多个json结构组成的字符串转换为数组？
接口返回的EventStream结构的数据,由于http流式传输时,可能会分段,所以导致本该每次返回一段json数据结构的字符串,变成了多个json数据结构的字符串拼接在了一起,本文讲述js如何将多个json结构组成的字符串转换为数组
2024-08-08
bootstrap读书笔记之CSS组件（上）
这篇文章主要介绍了bootstrap读书笔记之CSS组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
js实现旋转木马轮播图效果
这篇文章主要为大家详细介绍了js实现旋转木马轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
微信小程序详解如何实现付款功能
日常小程序里很多是需要付款的，那如何在小程序里实现付款呢？本篇就带着大家体验一下，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
2022-08-08
JavaScript 动态改变图片大小
本文作者通实际操作，发现可以用Javascript代码简单实现：对于图片大于100 X 100，则将其缩小为 100 X 100，若比这个小，则保持原图大小。
2009-06-06
微信小程序时间标签和时间范围的联动效果
这篇文章主要为大家详细介绍了微信小程序时间标签和时间范围的联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
jQuery检查元素存在性(推荐)
这篇文章主要介绍了JavaScript检查元素存在性的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
原生js实现addClass,removeClass,hasClass方法
这篇文章主要介绍了原生js实现addClass,removeClass,hasClass方法和使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下
2016-04-04