打印

JGrid 中拖动改变列宽原型

xling [楼主]

艾克司令

版主

帖子: 2927
体力: 5209
威望: 90
当前: 广东深圳

专长 JS,PHP,Oracle

1^# 大中小发表于 2008-4-18 21:52

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>无标题文档</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>

提示：您可以先修改部分代码再运行

<!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>无标题文档</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>

提示：您可以先修改部分代码再运行

[ 本帖最后由 xling 于 2008-4-18 21:53 编辑 ]

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

skybot

size

钻石会员

帖子: 2794
体力: 6551
威望: 6
当前: 上海长宁

专长 JS,C#,MSSQL

2^# 大中小发表于 2008-4-21 09:01

谢谢你.关于拖动这种效果真的实用.在GRID里可以解决很多问题.谢谢你了

http://www.qlili.com 个人站帮点啊

TOP

美橙vps独立IP月付189元

skybot

size

钻石会员

帖子: 2794
体力: 6551
威望: 6
当前: 上海长宁

专长 JS,C#,MSSQL

3^# 大中小发表于 2008-4-22 13:43

PS 现在废弃了自己开发表格,打算使用 ext

http://www.qlili.com 个人站帮点啊

TOP

中央美院远程平面设计进修班

jiangjohy

高级会员

帖子: 335
体力: 786
威望: 1
离线: 1 天

4^# 大中小发表于 2008-7-18 00:16

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

晃晃悠悠~~~

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

xling [楼主]

艾克司令

版主

帖子: 2927
体力: 5209
威望: 90
当前: 广东深圳

专长 JS,PHP,Oracle

5^# 大中小发表于 2008-7-18 09:22

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

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

JGrid 中拖动改变列宽 原型

JGrid 中拖动改变列宽原型