资源描述
表格和js连用实例.docx
《表格和js连用实例.docx》由会员分享,可在线阅读,更多相关《表格和js连用实例.docx(10页珍藏版)》请在冰豆网上搜索。
表格和js连用实例
dragexample*{
margin:
0;
padding:
0;
}
body{
text-align:
center;
}
.mil{
text-align:
center;
line-height:
96px;
}
relative;margin:
0auto;width:
500px;height:
500px;border:
1pxsolidred;">
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;iitmp_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;iitmp_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;ifor(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(axreturn1;
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();
}
|