JGrid中拖動改變列寬的腳本原型

更新時間：2008年07月18日 12:57:48 作者：

JGrid 中，可以拖動改變列寬，簡單的原理就是改變相應(yīng)的 col 的 style.width 今天看到skybot 同學(xué)在問這個問題，就又把這個功能拿出來，單獨實現(xiàn)了一下（有改進(jìn)）

順便，把我研究過的，如何隱藏、顯示一列的方法也實現(xiàn)了一把。但是這個功能和 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需再刷新一下頁面才能執(zhí)行]

修改版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需再刷新一下頁面才能執(zhí)行]

ff下拖動時一大塊影子是怎么產(chǎn)生的呢

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