表格和js连用实例.docx

function$（id）{returndocument.getElementById（id）;}

varrow=4;

varcol=4;

varwidth=96;

varheight=96;

varisIE=false;

varisFF=false;

vararr=[];

vartmp_from=[];

vartmp_to=[];

functionDragClass（id,x,y）{//dragclass

this.id=id;

this.posX=x;

this.posY=y;

this.type=0;//1:

col2:

row3:

table4:

head

this.obj=null;

this.color=null;

this.px=null;

this.py=null;

}

DragClass.prototype.init=function（）{

if（this.type==1）{

this.color="blue";

this.obj.style.background=this.color;

this.obj.style.color="yellow";

this.start（）;

}

elseif（this.type==2）{

this.color="green";

this.obj.style.background=this.color;

this.obj.style.color="yellow";

this.start（）;

}

elseif（this.type==3）{

this.color="red";

this.obj.style.background="red";

this.obj.style.color="yellow";

this.start（）;

}

else{

this.color="black";

this.obj.style.background=this.color;

this.obj.innerHTML="固定表头";

this.obj.style.color='white';

}

};

DragClass.prototype.start=function（）{

varself=this;

this.obj.onmousedown=function（e）{

e=e||window.event;

if（self.type==3）{

self.px=get_xy（e）[0]-self.posX;

self.py=get_xy（e）[1]-self.posY;

self.changeStyle（）;

}

elseif（self.type==1）{

tmp_from=get_tmp（1,self.id.split（'_'）[1]）;

for（variintmp_from）{

tmp_from[i].px=get_xy（e）[0]-tmp_from[i].posX;

tmp_from[i].py=get_xy（e）[1]-tmp_from[i].posY;

tmp_from[i].changeStyle（）;

}

}

elseif（self.type==2）{

tmp_from=get_tmp（2,self.id.split（'_'）[0]）;

for（variintmp_from）{

tmp_from[i].px=get_xy（e）[0]-tmp_from[i].posX;

tmp_from[i].py=get_xy（e）[1]-tmp_from[i].posY;

tmp_from[i].changeStyle（）;

}

}

document.onmousemove=function（e）{

self.move（e）;

returnfalse;

};

document.onmouseup=function（e）{

self.stop（e）;

};

returnfalse;

};

}

DragClass.prototype.move=function（e）{

if（this.type==3）{

this.obj.style.left=（get_xy（e）[0]-this.px）+'px';

this.obj.style.top=（get_xy（e）[1]-this.py）+'px';

}

elseif（this.type==1||this.type==2）{

for（variintmp_from）{

tmp_from[i].obj.style.left=（get_xy（e）[0]-tmp_from[i].px）+'px';

tmp_from[i].obj.style.top=（get_xy（e）[1]-tmp_from[i].py）+'px';

}

}

}

DragClass.prototype.stop=function（e）{

this.check（get_xy（e）[0],get_xy（e）[1]）;

if（this.type==3）{

this.changeStyleBack（）;

}

else{

for（variintmp_from）{

tmp_from[i].changeStyleBack（）;

}

}

document.onmousemove=null;

document.onmouseup=null;

}

DragClass.prototype.changeStyle=function（）{

this.obj.style.background="lightgray";

this.obj.style.zIndex="1";

}

DragClass.prototype.changeStyleBack=function（）{

this.obj.style.background=this.color;

this.obj.style.zIndex='0';

}

DragClass.prototype.check=function（x,y）{//checksingle

varflag=true;

varflags=true;

for（varkeyinarr）{

vari=arr[key].id.split（"_"）[0];

varj=arr[key].id.split（"_"）[1];

if（this.type==3&&arr[key].type==3）{

if（x<30+j*100+width&&x>30+j*100&&y<30+i*100+height&&y>30+i*100）{

this.table_each（arr[key]）;

flag=false;

break;

}

}

elseif（this.type==1&&arr[key].type==1）{

if（x<30+j*100+width&&x>30+j*100&&y<30+i*100+height&&y>30+i*100）{

tmp_to=get_tmp（1,j）;

if（tmp_to.length==tmp_from.length）{

//alert（'ok'）;

for（varii=0;ii

tmp_from[ii].table_each（tmp_to[ii]）;

}

}

flags=false;

break;

}

}

elseif（this.type==2&&arr[key].type==2）{

if（x<30+j*100+width&&x>30+j*100&&y<30+i*100+height&&y>30+i*100）{

tmp_to=get_tmp（2,i）;

if（tmp_to.length==tmp_from.length）{

//alert（'ok'）;

for（varii=0;ii

tmp_from[ii].table_each（tmp_to[ii]）;

}

}

flags=false;

break;

}

}

}

if（flag）{

this.obj.style.left=this.posX+'px';

this.obj.style.top=this.posY+'px';

}

if（flags）{

for（varxintmp_from）{

tmp_from[x].obj.style.left=tmp_from[x].posX+'px';

tmp_from[x].obj.style.top=tmp_from[x].posY+'px';

}

}

}

DragClass.prototype.table_each=function（o）{//交换

varpx=this.posX;

varpy=this.posY;

varid=this.id;

this.posX=o.posX;

this.posY=o.posY;

this.id=o.id;

o.id=id;

o.posX=px;

o.posY=py;

this.obj.style.left=this.posX+'px';

this.obj.style.top=this.posY+'px';

o.obj.style.left=o.posX+'px';

o.obj.style.top=o.posY+'px';

}

functioninit（）{

varfrag=document.createDocumentFragment（）;//createfragment

for（vari=0;i

for（varj=0;j

varspan=document.createElement（"span"）;

span.className="mil";

span.style.position="absolute";

span.style.width=width+'px';

span.style.height=height+'px';

span.style.top=30+i*100+'px';

span.style.left=30+j*100+'px';

span.id=i+'_'+j;

varobj=newDragClass（span.id,30+j*100,30+i*100）;

obj.obj=span;

arr.push（obj）;

if（i==0&&j==0）{//head

obj.type=4;

}

elseif（i==0）{//colhead

span.innerHTML="列头"+j;

obj.type=1;

}

elseif（j==0）{//rowhead

span.innerHTML="行头"+i;

obj.type=2;

}

else{

span.innerHTML="表格"+i+"_"+j;

obj.type=3;

}

obj.init（）;

frag.appendChild（span）;

}

}

$（'main'）.appendChild（frag）;

}

functionget_tmp（type,i）{

vartmp=[];

for（varxinarr）{

if（type==1）{

if（arr[x].id.split（'_'）[1]==i）{

tmp.push（arr[x]）;

}

}

else{

if（arr[x].id.split（'_'）[0]==i）

tmp.push（arr[x]）;

}

}

tmp.sort（function（a,b）{//ascsort

varax=a.id.split（'_'）[0];

varay=a.id.split（'_'）[1];

varbx=b.id.split（'_'）[0];

varby=b.id.split（'_'）[1];

if（ax

return1;

else

return-1;

}）

returntmp;

}

functionget_xy（e）{//getmouse

e=e||window.event;

vararr=[];

varx=e.pageX||e.clientX;

vary=e.pageY||e.clientY;

x=x-$（'main'）.offsetLeft;

arr[0]=x;

arr[1]=y;

returnarr;

}

window.onload=function（）{

init（）;

}