grid拖动列头改变列宽

lgx2351

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还是什么其它的元素，其原理是一样的。