本站已年久失修,技术交流可以移步到 https://blog.pyzy.net
  所在位置:杂记 >> javascript >> javascript实现表格排序功能
javascript实现表格排序功能
发表于 十二年前(2009-11-16 12:00:55) | 阅读 (892) | 评论 (0)
/**************************************
*purpouse:对表格进行排序 (胡尊杰 20090718修正增强版本 )
*author  :王建波
*version :1.0 bate
*date    :2008-9-26
*email   :wang_jian_bo037@126.com
**************************************/
function _$(sId){
    return document.getElementById(sId);
}
function _$Name(sName){
    var oParNode=oParNode?oParNode:document;
    return oParNode.getElementsByName(sName);    
}
Array.prototype._isElIn=function(el){
    var i,nLen=this.length;
    for(i=0;i<nLen;i++){
        if(this[i]==el)
            break;
    }
    return i<nLen;
}

function TableOrder(oTable,oCfg){
    if(typeof(oTable)=="string")
        oTable=_$(oTable)||_$Name(oTable)[0];
    if(!oTable){
        alert("Error table object!");
        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 oHeader=oTable.tHead;
         var oRowHead=oHeader
                     ?oHeader.rows[oHeader.rows.length-1]
                     :oTable.rows[0];
         return oRowHead;
    })();
    
    //set order colum
    if(oCfg&&oCfg.sortcols)
        this.sortcols=oCfg.sortcols;
        
    this.record=(function(){
         var i,nLen,aRows,aBodies=oTable.tBodies;
         if(oTable.tHead){
             aRows=aBodies[0].rows;                 
         }else{
             //if can't find thead then the first row as thead others as tbody
             nLen=oTable.rows.length;
             aRows=[];
             for(i=1;i<nLen;i++){
                 aRows.push(oTable.rows[i]);
             }
         }
         return aRows;    
     })();
}


TableOrder.prototype.init=function(){
    var oTOrder=this;
    this.header.onclick=function(e){
        oTOrder.header.onclick=null;
        oTOrder.handleClick(e);
        oTOrder.header.onclick=arguments.callee;
    }
}

TableOrder.prototype.handleClick=function(e){
    var evt=e||window.event;
    var srcEl=evt.target||evt.srcElement;
    var oTr,i,nLen;/*oImg,*/
    var nCellIndex,canOrder;
    
    //check weather the colum can sort
    while(srcEl.tagName!="TD"&&srcEl.tagName!="TH"){
        srcEl=srcEl.parentNode;
    }
    oTr=srcEl.parentNode;
    nCellIndex=(function(){
                   var i,nLen=oTr.cells.length;
                   for(i=0;i<nLen;i++)
                          if(oTr.cells[i]==srcEl)
                              break;
                   return i;
               })();
    canOrder=!this.sortcols
            ||this.sortcols._isElIn(nCellIndex);
    if(!canOrder){
        return;
    }
    
    //if the colum has not sort image then append  胡尊杰 将图片换为样式
    /*if(!srcEl.orderImg){
        oImg=new Image();
        srcEl.appendChild(oImg);
        srcEl.orderImg=oImg;
    }*/
    
    //hide orther colums sort image
    nLen=oTr.cells.length;
    for(i=0;i<nLen;i++){
        if(i!=srcEl.cellIndex/*&&oTr.cells[i].orderImg*/){
            oTr.cells[i].className="";/*orderImg.style.visibility="hidden"*/;
            oTr.cells[i].style.backgroundImage="url("+this.iconpath+"new_paixu_all.jpg)";
        }
    }
    srcEl.className="Sel";/*.orderImg.style.visibility="visible"*/;
    
    //change sort images
    if(srcEl.order&&srcEl.order=="des")
         srcEl.order="asc";
    else
         srcEl.order="des";
    srcEl.style.backgroundImage="url("+this.iconpath+"new_paixu_"+(srcEl.order=="des"?"down":"up")+".jpg)"; /*orderImg.src*/
    
    //sort table
    try{
        this.order(e,nCellIndex,srcEl.order);
    }catch(e){
        alert("没有可排序的数据!"); //e.message
    }
}

TableOrder.prototype.order=function(e,index,order){
    var oGetValue=this.getfuncs&&this.getfuncs[index]
             ?this.getfuncs[index]
             :function(_oTd){
                   return _oTd.innerHTML.replace(/<[\S\s]*?>/gi,"")
                                        .replace(/^\s+|\s+$/gi,"");
             };
    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;};
    var parNodeOfRow=this.record[0].parentNode
                    ||this.table;
    var oFrag=document.createDocumentFragment();
    var i,nLen=this.record.length;
    var aRowInfo=[];
    
    //sort rows
    for(i=nLen-1;i>=0;i--){
        aRowInfo.push({
            index:i,
            value:oGetValue(this.record[i].cells[index]),
            obj:parNodeOfRow.removeChild(this.record[i])
        });
    }
    aRowInfo.sort(orderFunc);
    
    //append sorted rows to tbody
    for(i=0;i<nLen;i++){
        aRowInfo[i].obj.className=(i%2==0?"":"BG");/*胡尊杰 扩展样式调整*/
        oFrag.appendChild(aRowInfo[i].obj);
    }
    parNodeOfRow.appendChild(oFrag);
    
    //if set callAfterOrder function then call the function
    if(this.callAfterOrder)
        this.callAfterOrder(e);
}
以下为效果演示:
商品名称 价格 类型 特性 数字编号
商品1A RMB 418 中国制造 很好 1
商品1B RMB 458 美国制造 不错 2
商品2A RMB 418 日本制造 凑合 3
商品2B RMB 488 俄国制造 一般 4
商品3B RMB 488 英国制造 小小意思 5
商品3A RMB 458 德国制造 毛毛雨 6
商品4B RMB 498 爱哪哪制造 木知 7
商品4 RMB 458 不知道 知不到 8
杂记评论(0):
称谓(必填):  网站(选填):
上一篇:SQL优化--select into 和 insert into select 两种表复制语句  下一篇:CSS+DIV+Javascript前端开发实例之《图片展示》(1)     <<返回杂记列表