• js表格排序


    
    

    排序代码

    function SortTable(sTableID, iCol, sDataType){
        this.oTable=document.getElementById(sTableID);
        this.oTBody=this.oTable.tBodies[0];
        this.colDataRows=this.oTBody.rows;
        this.aTRs=[];
        this.iCol=iCol;
        this.sDataType=sDataType;
    }
    
    SortTable.prototype={
        convert:function(sValue, sDataType){
            switch(sDataType){
                case "int":
                    return parseInt(sValue);
                case "float":
                    return parseFloat(sValue);
                case "date":
                    return new Date(sValue);
                default:
                    return sValue.toString();
            }
        },
        generateCompareTRs:function(iCol, sDataType, that){
            return function compareTRs(oTR1,oTR2){
                        var vValue1= that.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType),
                            vValue2= that.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
                        if(vValue1 < vValue2){
                            return -1;
                        } else if(vValue1 > vValue2){
                            return 1;
                        } else{
                            return 0;
                        }
                   };
        },
        sort:function(){
            for(var i=0,l=this.colDataRows.length;i<l;i++){
                this.aTRs.push(this.colDataRows[i]);
            }
            if(this.oTable.sortCol === this.iCol){
                this.aTRs.reverse();
            } else {
                this.aTRs.sort(this.generateCompareTRs(this.iCol, this.sDataType, this));
            }
    
            var oFragment=document.createDocumentFragment();
            for(var i=0,l=this.aTRs.length;i<l;i++){
                oFragment.appendChild(this.aTRs[i]);
            }
    
            this.oTBody.appendChild(oFragment);
            this.oTable.sortCol = this.iCol;
        }
    }
    

    调用示例

    function bindSortTable(sTableID, iCol, sDataType){
        var table=document.getElementById(sTableID),
            ftr=table.tHead.rows[0],
            tds=ftr.cells;
        if(tds[iCol]){
            tds[iCol].onclick=function(){
                var sortTable=new SortTable(sTableID, iCol, sDataType);
                sortTable.sort();
            }
        }
    }
    
    window.onload=function(){
        bindSortTable("tblSort",0);
        bindSortTable("tblSort",1);
        bindSortTable("tblSort",2,"int");
        bindSortTable("tblSort",3,"float");
        bindSortTable("tblSort",4,"date");
    }

    JSCode demo

    Last Name First Name Number Score Birthday
    O D 5 20.1 7/12/1999
    P C 3 30.1 7/12/1990
    Q B 4 27.1 7/12/1995
    R A 2 24.1 7/12/1998  
    每一天都要行动,在前进中寻求卓越。
  • 相关阅读:
    后台跨域(CORS)
    后台跨域(CORS)
    Spring MVC中forward请求转发2种方式(带参数)
    Spring MVC中forward请求转发2种方式(带参数)
    Spring MVC中forward请求转发2种方式(带参数)
    MyEclipse使用总结——MyEclipse去除网上复制下来的来代码带有的行号
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
  • 原文地址:https://www.cnblogs.com/wshsdlau/p/2626733.html
Copyright © 2020-2023  润新知