打BOSS倒计时小程序之列表排序

列表排序直接用的这篇作者分享的排序插件：http://www.cnblogs.com/robot/archive/2008/04/20/1161801.html,插件真的写的很好，用起来很简单，效果也好。

源码如下：

//Author    :   狼Robot
//Contact   :   [email protected]
//Date      :   2008-04-19
//Explain   :   使Table可以点击排序.

/*使用说明  :
方法1:
    new TableSorter("tb1");
效果:
    id为tb1的table的第一行任意单元格都可以点击进行排序.

方法2:
    new TableSorter("tb1", 0, 1, 3);
效果:
    id为tb1的table的第一行0,1,3单元格可以进行点击排序.
*/

function TableSorter(table)
{
    this.Table = this.$(table);
    if(this.Table.rows.length <= 1)
    {
        return;
    }
    var args = [];
    if(arguments.length > 1)
    {
        for(var x = 1; x < arguments.length; x++)
        {
            args.push(arguments[x]);
        }
    }
    this.Init(args);
}

TableSorter.prototype = {
    $ : function(element)//简写document.getElementById
    {
        return document.getElementById(element);
    },
    Init : function(args)//初始化表格的信息和操作
    {
        this.Rows = [];
        this.Header = [];
        this.ViewState = [];
        this.LastSorted = null;
        this.NormalCss = "NormalCss";
        this.SortAscCss = "SortAscCss";
        this.SortDescCss = "SortDescCss";
        for(var x = 0; x < this.Table.rows.length; x++)
        {
            this.Rows.push(this.Table.rows[x]);
        }
        this.Header = this.Rows.shift().cells;
        for(var x = 0; x < (args.length ? args.length : this.Header.length); x++)
        {
            var rowIndex = args.length ? args[x] : x;
            if(rowIndex >= this.Header.length)
            {
                continue;
            }
            this.ViewState[rowIndex] = false;
            this.Header[rowIndex].style.cursor = "pointer";
            this.Header[rowIndex].onclick = this.GetFunction(this, "Sort", rowIndex);
        }
    },
    GetFunction : function(variable,method,param)//取得指定对象的指定方法.
    {
        return function()
        {
            variable[method](param);
        }
    },
    Sort : function(column)//执行排序.
    {
        if(this.LastSorted)
        {
            this.LastSorted.className = this.NormalCss;
        }
        var SortAsNumber = true;
        for(var x = 0; x < this.Rows.length && SortAsNumber; x++)
        {
            SortAsNumber = this.IsNumeric(this.Rows[x].cells[column].innerHTML);
        }
        this.Rows.sort(
        function(row1, row2)
        {
            var result;
            var value1,value2;
            value1 = row1.cells[column].innerHTML;
            value2 = row2.cells[column].innerHTML;
            if(value1 == value2)
            {
                return 0;
            }
            if(SortAsNumber)
            {
                result = parseFloat(value1) > parseFloat(value2);
            }
            else
            {
                result = value1 > value2;
            }
            result = result ? 1 : -1;
            return result;
        })
        if(this.ViewState[column])
        {
            this.Rows.reverse();
            this.ViewState[column] = false;
            this.Header[column].className = this.SortDescCss;
        }
        else
        {
            this.ViewState[column] = true;
            this.Header[column].className = this.SortAscCss;
        }
        this.LastSorted = this.Header[column];
        var frag = document.createDocumentFragment();
        for(var x = 0; x < this.Rows.length; x++)
        {
            frag.appendChild(this.Rows[x]);
        }
        this.Table.tBodies[0].appendChild(frag);
        this.OnSorted(this.Header[column], this.ViewState[column]);
    },
    IsNumeric : function(num)//验证是否是数字类型.
    {
        return /^\d+(\.\d+)?$/.test(num);
    },
    OnSorted : function(cell, IsAsc)//排序完后执行的方法.cell:执行排序列的表头单元格,IsAsc:是否为升序排序.
    {
        return;
    }
}

因为我这里不但要排序，而且是要根据倒计时的时间来排序，时间越接近越排在前面。在源码的基础上这么修改的：

1、将table对象返回：

function TableSorter(table){
    this.Table = this.$(table);
    if(this.Table.rows.length <= 1)
    {
        return;
    }
    var args = [];
    if(arguments.length > 1)
    {
        for(var x = 1; x < arguments.length; x++)
        {
            args.push(arguments[x]);
        }
    }
    this.Init(args);
    return this;
}

页面定义全局变量进行接收：

var tableObj = null;

$(function(){	
	//为排序添加事件
	tableObj = new TableSorter(tableName,0,3,5);
});

2、在插件中添加方法，用来修改本来的排列顺序，这样就可以随时修改（原插件中默认的是点一下升序，再点一下降序。我这里是每次单都要升序，因为越接近的时间越小越应该排前面）

//该方法用来手动修改排序情况：column:进行排序的列所在下标 sort：升序、降序
setViewState:function(column,sort)
{
	this.ViewState[column] = sort;
}

3、调用（倒计时一分钟计算一次，每次计算都认为排序）：

var cutDownIndex = 5;//倒计时
var intervalTime = 1*60*1000;//一分钟执行一次
var timer = window.setInterval(function(){
	sortTable(cutDownIndex,false);//倒计时永远都是最接近的放上面，所以一直都是从小到大，升序
},intervalTime);
/**
 * 该方法用来排序
 * @param column:为哪一列进行排序
 * @param sort:true:降序 false：升序
 * */
function sortTable(column,sort){
	tableObj.setViewState(column,sort);//设置排序方式
	tableObj.Sort(column);//排序
}

后来业务需求变化了：启动倒计时功能的排上面，不启动的排下面，原则还是时间越接近越往上排。于是在原有Sort方法的基础上，添加了一个新的方法：

SortForCutdown : function(column)//执行排序:倒计时所在列专用
{
if(this.LastSorted)
{
    this.LastSorted.className = this.NormalCss;
}
var SortAsNumber = true;
for(var x = 0; x < this.Rows.length && SortAsNumber; x++)
{
    SortAsNumber = this.IsNumeric(this.Rows[x].cells[column].innerHTML);
}
this.Rows.sort(
function(row1, row2)
{
    var result;
    var value1,value2;
    value1 = row1.cells[column].innerHTML;
    value2 = row2.cells[column].innerHTML;
    
    var sign1 = $(row1).attr("sign");//第一行数据的标识
    var sign2 = $(row2).attr("sign");//第二行数据的标识
    //alert(row1.cells[2].innerHTML+"\t"+sign1+"\n"+row2.cells[2].innerHTML+"\t"+sign2);
    if((sign1==undefined || sign1=="0") && (sign2==undefined || sign2=="0")){//说明两列数据都没有启动
	    //alert("两个都没有启动");
	    if(value1 == value2)return 0;
	    if(SortAsNumber)result = parseFloat(value1) > parseFloat(value2);
	    else result = value1 > value2;
	    result = result ? 1 : -1;
    }else{//至少有一个启动
	if(sign1=="1" && (sign2==undefined || sign2=="0")){//第一个启动了，第二个没启动
		//alert("第一个启动了");
		return -1;
	}else if(sign2=="1" && (sign1==undefined || sign1=="0")){//第二个启动了，第一个没启动
		//alert("第二个启动了");
		return 1;
	}else if(sign1=="1" && sign2=="1"){//都启动了，那么比值的大小
		//alert("两个都启动了");
		if(value1 == value2)return 0;
		    if(SortAsNumber)result = parseFloat(value1) > parseFloat(value2);
		    else result = value1 > value2;
		    result = result ? 1 : -1;
	}
    }
    return result;
})
if(this.ViewState[column])
{
    this.Rows.reverse();
    this.ViewState[column] = false;
    this.Header[column].className = this.SortDescCss;
}
else
{
    this.ViewState[column] = true;
    this.Header[column].className = this.SortAscCss;
}
this.LastSorted = this.Header[column];
var frag = document.createDocumentFragment();
for(var x = 0; x < this.Rows.length; x++)
{
    frag.appendChild(this.Rows[x]);
}
this.Table.tBodies[0].appendChild(frag);
this.OnSorted(this.Header[column], this.ViewState[column]);
}

调用的时候调用SortForCutdown方法即可，这样子即可以保留手动的“点击倒计时列进行排序”的功能，也能自动的根据倒计时规则进行升序显示。

function sortTable(column,sort){
	tableObj.setViewState(column,sort);//设置排序方式
	tableObj.SortForCutdown(column);//排序
}

最后祝大家好运！

打BOSS倒计时小程序之列表排序

猜你喜欢