用.Net实现基于CSS的AJAX开发(5)

.Wqr903{display:none;} /**//**
*下移按钮
**/
downRow:function(e)...{
varthat=crudbtn.that;
varlinkEl=getEventTarget(e);
vartd=linkEl.parentNode;
vartr=td.parentNode;
varthead=tr.parentNode;
vartable=thead.parentNode;

varotr=tr;
if(tr.rowIndex==table.rows.length-1)...{
alert("已经是最后一行了");
returnfalse;
}
else...{
table.moveRow(tr.rowIndex,tr.rowIndex+1);
this.isOdd=true;
varrows=table.tBodies[0].rows;

//重新隔行换色
for(vari=1;i<rows.length;i++)...{
if(!this.isOdd)...{
CSS.addClassToElement(rows[i],'odd');
}else...{
CSS.removeClassFromElement(rows[i],'odd');
}
this.isOdd=!this.isOdd;
}
}

//实现AJAX调用处理下移
//下移则把pars和pars2的值反过来,后台不变
varpars="pars2=";
for(h=0;h<tr.cells.length;h++)...{
if(!CSS.elementHasClass(tr.cells[h],'editbtn')&&!CSS.elementHasClass(tr.cells[h],'delbtn')
&&!CSS.elementHasClass(tr.cells[h],'updownbtn'))...{
varcolid=tr.cells[h].getAttribute('columnId');
if(tr.cells[h].firstChild.value!=null)...{
pars+=h+"^"+tr.cells[h].firstChild.value+"|";
}
else...{
pars+=h+"^"+tr.cells[h].innerText+"|";
}
}
}
varpars2="&pars=";
varuprow=table.rows[tr.rowIndex-1];
for(y=0;y<uprow.cells.length;y++)...{
if(!CSS.elementHasClass(uprow.cells[y],'editbtn')&&!CSS.elementHasClass(uprow.cells[y],'delbtn')
&&!CSS.elementHasClass(uprow.cells[y],'updownbtn'))...{
varcolid=uprow.cells[y].getAttribute('columnId');
if(uprow.cells[y].firstChild.value!=null)...{
pars2+=y+"^"+uprow.cells[y].firstChild.value+"|";
}
else...{
pars2+=y+"^"+uprow.cells[y].innerText+"|";
}
}
}
pars3="&command=MoveUpDown&callback=afterUpdate&table="+table.id;
newAJAX.Updater('result','Dispatcher.AJAX?'+pars+pars2+pars3,...{evalScripts:true});
}

}
functioncrudbtnInit()...{
crudbtn.init();
}
//回调:处理结束后的反映
afterUpdate=function(e)...{
if(e=='true')...{

}
elseif(e=='false')...{
alert("您的操作失败了,请重新尝试");
window.location.reload();
}
elseif(e=='repeated')...{
alert("您写入了重复的信息！请重新输入");
window.location.reload();
}

}
addEvent(window,'load',crudbtnInit);

后台处理同AJAXDelRow.cs

排序样式绑定JS：

/**//*
*WrittenbyWangzhongyuan
*通过绑定sort样式进行后台排序的代码
*/
varsorting=...{

that:false,
isOdd:false,
sortColumnIndex:-1,
lastAssignedId:0,
newRows:-1,
lastSortedTable:-1,

/**//**
*初始化排序器
**/
init:function()...{
//首先,查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
if(!document.getElementsByTagName)...{
return;
}

this.that=this;

this.run();

},

/**//**
*在文档中遍历所有table,如果table拥有sort样式,则启动排序功能
**/
run:function()...{
vartables=document.getElementsByTagName("table");

for(vari=0;i<tables.length;i++)...{
varthisTable=tables[i];

if(CSS.elementHasClass(thisTable,'sort'))...{
this.makeSortable(thisTable);
}
}
},

/**//**
*启动给定表的排序功能
**/
makeSortable:function(table)...{

//首先,检测该table是否有ID.如果没有就分配一个给它
if(!table.id)...{
table.id='sortableTable'+this.lastAssignedId++;
}
//判断有没有数据
if(table.rows.length<2)
return;
//把表格的第一行视为表头,然后下面要把它们变成可点击
varrow=table.tBodies[0].rows[0];
/**//*结合后台的hack:主要用于解析初始化时的排序方向.
*由于考虑到适应自定义数据绑定模板,故越过表头,使用第二行
*/
varrow2=table.tBodies[0].rows[1];

for(vari=0;i<row.cells.length;i++)...{

//建立一个链接,并使它拥有能控制排序的onClick事件
varlinkEl=createElement('a');
linkEl.href='#';
linkEl.onclick=this.headingClicked;
linkEl.setAttribute('columnId',i);
linkEl.title='点击排序';

//获取标题行的所有列,以便加入链接
varinnerEls=row.cells[i].childNodes;
//遍历标题行的所有列并加入链接
for(varj=0;j<innerEls.length;j++)...{
//如果标题列样式为nosort则不排序
if(!CSS.elementHasClass(row.cells[i],'nosort'))
linkEl.appendChild(innerEls[j]);
}

//把新链接加到表格中
row.cells[i].appendChild(linkEl);

varspanEl=createElement('span');
CSS.addClassToElement(row.cells[i],'tableSortArrow');

//加两个空格
//spanEl.appendChild(document.createTextNode(''));
row.cells[i].appendChild(spanEl);

//为每一列判断从后台传过来的排序方向样式
if(CSS.elementHasClass(row2.cells[i],'sortOrderASC'))...{
spanEl.className='tableSortArrow';
spanEl.appendChild(document.createTextNode('↑'));
spanEl.setAttribute('sortOrder','ASC');
}
elseif(CSS.elementHasClass(row2.cells[i],'sortOrderDESC'))
...{
spanEl.className='tableSortArrow';
spanEl.appendChild(document.createTextNode('↓'));
spanEl.setAttribute('sortOrder','DESC');
}

}

//初始化隔行换色标志
this.isOdd=false;
varrows=table.tBodies[0].rows;

//启动隔行换色
for(vari=0;i<rows.length;i++)...{
this.doStripe(rows[i]);
}
},