ResizedColTable.js
/**/ /*********************************** * 可变列宽的表格 V1.1 2007-01-01 * Author:lzb linzhuobin@gmail.com * 2006-11-18 发布 V1.0 * 2007-01-01 V1.1 增加了列宽保持功能 ***********************************/ function ResizedColTable(tb) ... { var DEFAULT_COL_WIDTH=52; var dragSpan=null, preWidth=0, preX=0, newWidth=0; //改变列宽 (响应 onmousedown) function doMouseDown()...{ var evt = arguments.length==0 ? event : arguments[0]; dragSpan = evt.srcElement?evt.srcElement:evt.target; preWidth = parseInt(dragSpan.firstChild.style.width); preX = evt.x?evt.x:evt.pageX; if(dragSpan.setCapture)...{ dragSpan.setCapture(); dragSpan.onmousemove = changeColWidth; dragSpan.onmouseup = changeColWidthStop; }else if(window.captureEvents)...{ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); document.onmousemove = changeColWidth; document.onmouseup = changeColWidthStop; } } //改变列宽 (响应 onmousemove) function changeColWidth()...{ var evt = arguments.length==0 ? event : arguments[0]; var newX = evt.x?evt.x:evt.pageX; newWidth = newX - preX + preWidth; if(newWidth<8) newWidth=8; } //改变列宽 (响应 onmouseup) function changeColWidthStop()...{ if(dragSpan.releaseCapture)...{ dragSpan.releaseCapture(); dragSpan.onmousemove = null; dragSpan.onmouseup = null; }else if(window.captureEvents)...{ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); document.onmousemove = null; document.onmouseup = null; } dragSpan.firstChild.style.width = newWidth; var i=dragSpan.parentNode.cellIndex; for(var j=1;j<tb.rows.length;j++)...{ tb.rows[j].cells[i].firstChild.style.width=newWidth; } saveWidth(); } //鼠标所在行高亮显示 function doMouseOver()...{ this.className="dataRowSelected"; } //鼠标移出行 function doMouseOut()...{ this.className="dataRow"+(this.rowIndex%2); } //url+table.id 保证Cookie的唯一，以区别不同页面的同名控件 function getCookieName()...{ var i=-1; var url=window.location+""; i=url.lastIndexOf("?"); if(i>0)url=url.substr(0,i); i=url.indexOf("///"); if(i>0)url=url.substr(i+3,url.length-i-3); i=url.indexOf("//"); if(i>0)url=url.substr(i+2,url.length-i-2); i=url.indexOf("/"); if(i>0)url=url.substr(i,url.length-i); return url+"$"+tb.id; } //保存列宽到Cookie function saveWidth()...{ var aWidth=new Array(); var ths = tb.rows[0].cells; for(var i=0;i<ths.length;i++)...{ var sp=ths[i].firstChild; aWidth.push(sp.firstChild.style.width); } var date = new Date(); date.setDate(date.getDate()+7); //date.setSeconds(date.getSeconds()+7); CookieHelper.setCookie(getCookieName(),aWidth,date); } //从Cookie初始化列宽 function initWidth()...{ var sWidth = CookieHelper.getValue(getCookieName()); if(!sWidth)return; var aWidth=sWidth.split(","); var ths = tb.rows[0].cells; if(aWidth.length!=ths.length)return; for(var i=0;i<ths.length;i++)...{ var sp=ths[i].firstChild; sp.firstChild.style.width=aWidth[i]; } } //初始化 new function()...{ initWidth(); var ths = tb.rows[0].cells; for(var i=0;i<ths.length;i++)...{ var sp=ths[i].firstChild; if(sp.firstChild.style.width=="")sp.firstChild.style.width=DEFAULT_COL_WIDTH; if(sp.fixed!="true") sp.onmousedown=doMouseDown; else sp.style.cursor="default"; for(var j=1;j<tb.rows.length;j++)...{ var tr=tb.rows[j]; if(i==0)...{ tr.className="dataRow"+(j%2); tr.onmouseover=doMouseOver; tr.onmouseout=doMouseOut; } tr.cells[i].firstChild.style.width=sp.firstChild.style.width; } } saveWidth(); } } // cookie操作 function CookieHelper() ... {} ; // 保存cookie CookieHelper.setCookie = function (name,value,expires,path,domain) ... { if(!name || !value) return; var sCookie=name+"="+escape(value)+";"; if(expires)...{ try...{ sCookie+="expires="+expires.toGMTString()+";"; }catch(e)...{ } } if(path)...{ sCookie+="path="+path+";"; } if(domain)...{ sCookie+="domain="+domain+";"; } document.cookie=sCookie;} // 获取cookie值 CookieHelper.getValue = function (sName) ... { var value=null; var aCookie = document.cookie.split("; "); for (var i=0; i < aCookie.length; i++)...{ var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0])...{ value=unescape(aCrumb[1]); break; } } return value;}style.css
.purpleTb {...} { BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #b5caff 1px solid; BORDER-LEFT: #b5caff 1px solid; BORDER-BOTTOM: #666666 1px solid} .purpleTb {...} { FONT-SIZE: 12px} .purpleTb .fieldTr {...} { BACKGROUND-IMAGE: url(thbg.jpg); BACKGROUND-COLOR: #ece9d8} .purpleTb .fieldTd {...} { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 2px solid; PADDING-LEFT: 0px; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #c0c0c0 1px solid; HEIGHT: 28px} .purpleTb .fieldTd .fieldNowrapDiv {...} { PADDING-RIGHT: 0px; PADDING-LEFT: 3px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; CURSOR: default; PADDING-TOP: 3px; WHITE-SPACE: nowrap; TEXT-OVERFLOW: ellipsis} .purpleTb .fieldTd .dragDiv {...} { PADDING-RIGHT: 3px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 100%; CURSOR: e-resize; PADDING-TOP: 0px} .purpleTb .dataRow0 {...} { BACKGROUND-COLOR: #fafafa} .purpleTb .dataRow1 {...} { BACKGROUND-COLOR: #fff} .purpleTb .dataRowSelected {...} { BACKGROUND-COLOR: #efefef} .purpleTb .dataTd {...} { BORDER-RIGHT: #b5caff 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #b5caff 1px solid; HEIGHT: 22px} .purpleTb .dataTd .dataNowrapDiv {...} { PADDING-RIGHT: 0px; PADDING-LEFT: 3px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 3px; WHITE-SPACE: nowrap; TEXT-OVERFLOW: ellipsis}
demo.htm
< HTML > < HEAD > < META http-equiv =Content-Type content ="text/html; charset=gb2312" > < LINK href ="style.css" type =text/css rel =stylesheet > < SCRIPT src ="ResizedColTable.js" ></ SCRIPT > < STYLE > ... BODY {...}{ MARGIN: 0px}</STYLE></HEAD><BODY><TABLE class=purpleTb id=table1 cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR class=fieldTr> <TH class=fieldTd> <DIV class=dragDiv fixed="true"> <DIV class=fieldNowrapDiv onmousedown=event.cancelBubble=true; title="" style="WIDTH: 35px">序号</DIV></DIV></TH> <TH class=fieldTd> <DIV class=dragDiv fixed="false"> <DIV class=fieldNowrapDiv onmousedown=event.cancelBubble=true; title="" style="WIDTH: 130px">运行日程表达式</DIV></DIV></TH> <TH class=fieldTd> <DIV class=dragDiv fixed="false"> <DIV class=fieldNowrapDiv onmousedown=event.cancelBubble=true; title="" style="WIDTH: 180px">下次运行时间</DIV></DIV></TH> <TH class=fieldTd> <DIV class=dragDiv fixed="false"> <DIV class=fieldNowrapDiv onmousedown=event.cancelBubble=true; title="" style="WIDTH: 200px">程序标识</DIV></DIV></TH> <TH class=fieldTd> <DIV class=dragDiv fixed="false"> <DIV class=fieldNowrapDiv onmousedown=event.cancelBubble=true; title="" style="WIDTH: 150px">描述</DIV></DIV></TH> <TH class=fieldTd> <DIV class=dragDiv fixed="false"> <DIV class=fieldNowrapDiv onmousedown=event.cancelBubble=true; title="" style="WIDTH: 100px">操作</DIV></DIV></TH></TR> <TR> <TD class=dataTd> <DIV class=dataNowrapDiv title="" style="TEXT-ALIGN: center"><B>0</B></DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title="">0 46 21 8 1 ?</DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title="">2008年01月08日 21时46分00秒 </DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title="">jobDetail_test</DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title=测试>测试</DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title="" style="TEXT-ALIGN: center"><INPUT type=button value=修改日程></DIV></TD></TR> <TR> <TD class=dataTd> <DIV class=dataNowrapDiv title="" style="TEXT-ALIGN: center"><B>1</B></DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title="">40 42 17 16 1 ?</DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title="">2008年01月16日 17时42分40秒 </DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title="">jobDetail_importXlsData</DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title=导入excel数据>导入excel数据</DIV></TD> <TD class=dataTd> <DIV class=dataNowrapDiv title="" style="TEXT-ALIGN: center"><INPUT type=button value=修改日程></DIV></TD></TR></TBODY></TABLE><SCRIPT>...new ResizedColTable(document.getElementById('table1'));</SCRIPT></BODY></HTML>
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1494472
