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