grid拖动列头改变列宽

grid中，当某一单元格的内容很多时，要能够拖动grid标题行的各列列头改变列的宽度。

假设有这么一个简单的table：

<table>
 <tr>
   <td>序列</td>
   <td>姓名</td>
   <td>性别</td>
   <td>工作简历</td>
 </tr>
 <tr>
   <td>1</td>
   <td>lgx</td>
   <td>男</td>
   <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
 </tr>
</table>

 上面的table中，工作简历列有很多内容，需要拖动改变宽度。

具体的js代码如下（基于prototype）:

/**
 * 拖动列头以改变列的宽度 
 * author:liugx
 */
function ResizeGridColumn(){
}
ResizeGridColumn.prototype ={
	cancelClick:function(event){
		event.returnValue=false;   
	  	event.cancelBubble=true; 
	},
	getEventElement:function(clickObject){
		var evt = Event.getEvent();
		return (evt)?(event.target || event.srcElement):clickObject;	
	},
	getTableObj:function(event){
		var oTable = "";
		try {
			oTable = Event.findElement(event,"TABLE");
		}catch(e){
			_alert(e.message);
			return "";
		}
		return oTable;
	},
	dragToResize:function(elementToDrag,event){
		var oTable = this.getTableObj(event);
    	var mouseDownX = event.clientX;
    	var pareneTdWidth = elementToDrag.parentElement.offsetWidth;
    	var pareneTableWidth = oTable.offsetWidth;
    	
    	this.cancelClick(event);
	    if (document.addEventListener) {  // DOM Level 2 event model
	        document.addEventListener("mousemove", moveHandler, true);
	        document.addEventListener("mouseup", upHandler, true);
	    }
	    else if (document.attachEvent) {  // IE 5+ Event Model
	        elementToDrag.setCapture( );
	        elementToDrag.attachEvent("onmousemove", moveHandler);
	        elementToDrag.attachEvent("onmouseup", upHandler);
	        // Treat loss of mouse capture as a mouseup event.
	        elementToDrag.attachEvent("onlosecapture", upHandler);
	    }
	    else {  // IE 4 Event Model
	        var oldmovehandler = document.onmousemove; // used by upHandler( )
	        var olduphandler = document.onmouseup;
	        document.onmousemove = moveHandler;
	        document.onmouseup = upHandler;
	    }

	    if (event.stopPropagation) event.stopPropagation( );  // DOM Level 2
	    else event.cancelBubble = true;                      // IE
	
	    if (event.preventDefault) event.preventDefault( );   // DOM Level 2
	    else event.returnValue = false;                     // IE

	    function moveHandler(e) {
	        if (!e) e = window.event;  // IE Event Model
	        
	        var newWidth= pareneTdWidth*1 + event.clientX*1 - mouseDownX;
			if(newWidth>0){
				elementToDrag.parentElement.style.width = newWidth;
				oTable.style.width = pareneTableWidth*1 + event.clientX*1 - mouseDownX;
			}
	        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
	        else e.cancelBubble = true;                  // IE
	    }

	    function upHandler(e) {
	        if (!e) e = window.event;  // IE Event Model
	
	        if (document.removeEventListener) {  // DOM event model
	            document.removeEventListener("mouseup", upHandler, true);
	            document.removeEventListener("mousemove", moveHandler, true);
	        }
	        else if (document.detachEvent) {  // IE 5+ Event Model
	            elementToDrag.detachEvent("onlosecapture", upHandler);
	            elementToDrag.detachEvent("onmouseup", upHandler);
	            elementToDrag.detachEvent("onmousemove", moveHandler);
	            elementToDrag.releaseCapture( );
	        }
	        else {  // IE 4 Event Model
	            document.onmouseup = olduphandler;
	            document.onmousemove = oldmovehandler;
	        }
	        // And don't let the event propagate any further.
	        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
	        else e.cancelBubble = true;                  // IE
	    }
	}
}
var resizeGridColumn = new ResizeGridColumn();

 css代码：

.resizeDivClass{
	position:absolute;
	background-color:#FFD700;
	width:3;
	height:expression(this.parentElement.clientHeight);
	z-index:1;
	left:expression(this.parentElement.clientWidth);
	top:0px;
	cursor:e-resize; 
} 

 使用：

<table>
 <tr>
   <td style='position:relative'><div class=\"resizeDivClass\" onmousedown=\"resizeGridColumn.dragToResize(this,event);\"></div>序列</td>
   <td style='position:relative'><div class=\"resizeDivClass\" onmousedown=\"resizeGridColumn.dragToResize(this,event);\"></div>姓名</td>
   <td style='position:relative'><div class=\"resizeDivClass\" onmousedown=\"resizeGridColumn.dragToResize(this,event);\"></div>性别</td>
   <td style='position:relative'><div class=\"resizeDivClass\" onmousedown=\"resizeGridColumn.dragToResize(this,event);\"></div>工作简历</td>
 </tr>
 <tr>
   <td>1</td>
   <td>lgx</td>
   <td>男</td>
   <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
 </tr>
</table>

注意：

1、拖动div的位置，拖动div必须与标题行的每个td的右边框的位置重叠。这时候用相应定位来解决，把标题栏的td的position设置为relative，再把拖动div的 position设置为absolute,然后设置把它的left，top,height,width。拖动div相对于标题td的left是它的clientWidth值，top是0，height是clientHeight值。

2、js代码难度不大，注意以下几点即可：

  1）要考虑浏览器的兼容性。

  2）

Event.findElement(event,"TABLE");

    这句代码是找触发事件元素往上的为table标识的元素，即找到了table，看看prototype源码就很清楚了。

3、css中用expression来计算值的用法。

4、table的td不能是：<td nowrap>，如果这样写就不能换行了，也不能够实现缩成多行效果来改变宽度。

5、对于width的大小位置的计算明白一下，这样，不管是用于table还是什么其它的元素，其原理是一样的。