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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JGrid中拖动改变列宽的脚本原型

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 366 ::

收藏到网摘: n/a

javascript import css实例代码 javascript 兼容FF的onmouseenter和onmouseleave的代码

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> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </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 全选提示:你可先修改部分代码,再按运行]

修改版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> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </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 全选提示:你可先修改部分代码,再按运行]

ff下拖动时一大块影子是怎么产生的呢
是故意显示出来的。
把 -moz-opacity:0.1;opacity: 0.1 改掉。

javascript import css实例代码 javascript 兼容FF的onmouseenter和onmouseleave的代码

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

评论 (0) All

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