發佈一個js表格控件

ResizedColTable.js

/***********************************

* 可變列寬的表格 V1.1 2007-01-01

* Author:lzb [email protected]

* 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>

<STYLE>BODY { MARGIN: 0px}</STYLE>

</HEAD>

<BODY>

<TBODY>