写了个表格排序类，放上来抛砖引玉

Question

重发下那个js文件
function _$(sId){
return document.getElementById(sId);
}function TableOrder(oTable,oCfg){
if(typeof(oTable)=="string"){
oTable=_$(oTable)||_$Name(sName)[0];
}
if(!oTable){
alert("错误的表格对象");
return;
}

this.iconpath=oCfg&&oCfg.iconpath&&oCfg.iconpath!=""
              ?oCfg.iconpath
  :"./images/";
this.getfuncs=oCfg&&oCfg.getfuncs;
this.callAfterOrder=oCfg&&oCfg.callAfterOrder;
this.table=oTable;
this.header=(function(){
 var aHeader=oTable.getElementsByTagName("thead");
 var oRow=aHeader.length>0
 ?aHeader[0].rows[aHeader[0].rows.length-1]
 :oTable.rows[0];
 return oRow;
})();
this.record=(function(){
 var aBody=oTable.getElementsByTagName("tbody");
 var aRows=[];
 var i,nLen;
 if(oTable.getElementsByTagName("thead").length>0){
 aRows=aBody[aBody.length-1].rows;  
 }else{
 nLen=oTable.rows.length;
 for(i=1;i<nLen;i++){
 aRows.push(oTable.rows[i]);
 }
 }
 return aRows;
 })();
}
TableOrder.prototype.init=function(){
var oTOrder=this;
this.header.ondblclick=function(e){
var evt=e||window.event;
var srcEl=evt.target||evt.srcElement;
var oTr,oImg,i,nLen;
//获取触发排序操作的列对象
while(srcEl.tagName!="TD"){
srcEl=srcEl.parentNode;
}
//获取该列排序图像对象，若不存在则创建
if(!srcEl.orderImg){
oImg=new Image();
srcEl.appendChild(oImg);
srcEl.orderImg=oImg;
}
//隐藏其他列的排序图像
oTr=srcEl.parentNode;
nLen=oTr.cells.length;
for(i=0;i<nLen;i++){
if(i!=srcEl.cellIndex&&oTr.cells[i].orderImg){
oTr.cells[i].orderImg.style.visibility="hidden";
}
}
srcEl.orderImg.style.visibility="visible";
//更改排序方式
if(srcEl.order&&srcEl.order=="des"){
 srcEl.order="asc";
}else{
 srcEl.order="des";
}
//更改排序顺序图片
srcEl.orderImg.src=oTOrder.iconpath+srcEl.order+".gif";
//执行排序
oTOrder.order(e,srcEl.cellIndex,srcEl.order);
}
}/**
*表格排序处理函数
*@param {Winow.event}       事件对象(供排序后调用函数使用)
*@param {int} index         触发排序操作列索引
*@param {String}order       排序方式(asc/des)
*/
TableOrder.prototype.order=function(e,index,order){
//获取数据读取函数
var oRedFunc=this.getfuncs&&this.getfuncs[index]
         ?this.getfuncs[index]
 :function(_oTd){
    return _oTd.innerHTML.replace(/<[\S\s]*?>/gi,"")
                        .replace(/^\s+|\s+$/gi,"");
 };

//读取排序列数据并排序
var i,nLen=this.record.length;
var aRowInfo=[];
var orderFunc=order=="asc"
      ?orderFunc=function(item1,item2){return item1.value>item2.value?1:-1;}
         :orderFunc=function(item1,item2){return item1.value<item2.value?1:-1;};
for(i=0;i<nLen;i++){
aRowInfo.push({
index:this.record[i].rowIndex,
value:oRedFunc(this.record[i].cells[index]),
object:this.record[i]
});
}
aRowInfo.sort(orderFunc);

//根据排序结果移动表格行
var parNode=this.record[0].parentNode;
for(i=nLen-1;i>=0;i--){
try{
parNode.removeChild(this.record[i]);
}catch(e){
alert(e.message);
}
}
for(i=0;i<nLen;i++){
try{
parNode.appendChild(aRowInfo[i].object);
}catch(e){
alert(e.message);
}
}

//若制定了排序后调用函数执行函数
if(this.callAfterOrder)
this.callAfterOrder(e);
}

Answer 1

让我会用XML的排序！也许达不到你这种效果！但少打不少代码:)

Answer 2

用dom复制节点实属无奈，因为<tr><td>以及其他的表单控件比如checkbox有好多状态需要保留
只有这样才能尽可能多的保留控件的原有状态，但是也并不能完全保留，比如动态添加的属性
啊，事件处理程序什么的是无法复制的，所以才提供了一个callAfterOrder的接口以便在排序
后再进行一次事件绑定等操作，对于这个问题我还没有想到更好的解决方案，也是放上来和大家
探讨的主要原因