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\" οnmοusedοwn=\"resizeGridColumn.dragToResize(this,event);\"></div>序列</td>
<td style='position:relative'><div class=\"resizeDivClass\" οnmοusedοwn=\"resizeGridColumn.dragToResize(this,event);\"></div>姓名</td>
<td style='position:relative'><div class=\"resizeDivClass\" οnmοusedοwn=\"resizeGridColumn.dragToResize(this,event);\"></div>性别</td>
<td style='position:relative'><div class=\"resizeDivClass\" οnmοusedοwn=\"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还是什么其它的元素,其原理是一样的。