`

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

    博客分类:
  • JS
 
阅读更多

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

源码如下:

//Author    :   狼Robot
//Contact   :   robot@k2046.cn
//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倒计时小程序之在页面上将文字合成语音并播放出来

    【标题】"打BOSS倒计时小程序之在页面上将文字合成语音并播放出来"主要涉及的技术点是网页中的文字转语音(TTS,Text-to-Speech)和音频播放功能,这通常用于提高用户体验,比如游戏倒计时提示、无障碍阅读等场景。...

    电脑桌面倒计时小程序.rar

    《电脑桌面倒计时小程序:助力考研之路》 在备考考研的过程中,时间管理至关重要。一款优秀的倒计时软件能够帮助考生高效规划复习进度,保持良好的学习节奏。"电脑桌面倒计时小程序"就是这样一款专为考研学子量身...

    微信小程序 辩论倒计时 (源码)

    微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信...

    VB.NET 15分钟倒计时小程序

    【VB.NET 15分钟倒计时小程序】是一款利用Visual Basic .NET(简称VB.NET)开发的简单应用程序,它的核心功能是在屏幕上显示一个15分钟的倒计时计时器。这款小程序对于需要定时提醒或者计时的任务非常有用,比如工作...

    计时与倒计时小程序.exe

    时间的观念在现在的时代越来越重要,考试要定时完成,炒菜做饭要计时完成,甚至连煮包泡面都要计时...本程序下载可直接使用通过命令行输入提示完成计时与倒计时功能 源代码可见本人"自己制作一个计时器、倒计时器"文章

    微信小程序 电商-拼团 倒计时 (源码)

    微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 ...

    微信小程序-倒计时组件

    总之,微信小程序的倒计时组件是一个强大的工具,它简化了在小程序中实现时间倒计时的过程,让开发者能够更专注于应用的其他功能和用户体验。通过熟练掌握这个组件,初学者可以在短时间内提升开发效率,创造出更具...

    倒计时小程序VB源码.rar

    【VB源码详解——倒计时小程序】 VB(Visual Basic)是Microsoft公司开发的一种可视化的、面向对象的编程语言,它以其易学易用的特点深受初学者和专业开发者喜爱。本压缩包“倒计时小程序VB源码.rar”提供了一个在...

    BOSS刷新提醒-倒计时.zip

    在IT行业中,游戏开发是一个非常重要的领域,而“BOSS刷新提醒-倒计时”这样的功能则直指游戏系统的优化和用户体验提升。这个压缩包文件包含了一个名为“BOSS刷新提醒-倒计时.xls”的Excel表格,这通常用于管理游戏...

    微信小程序——电商-拼团 倒计时(截图+源码).zip

    微信小程序——电商-拼团 倒计时(截图+源码).zip 微信小程序——电商-拼团 倒计时(截图+源码).zip 微信小程序——电商-拼团 倒计时(截图+源码).zip 微信小程序——电商-拼团 倒计时(截图+源码).zip 微信小...

    倒计时小程序,VB源代码编写

    【倒计时小程序VB源代码编写】是一种编程实践,它使用Visual Basic(VB)语言来实现一个能够计算剩余时间的程序。VB是Microsoft开发的一种面向对象的编程环境,以其直观的用户界面和易于学习的语法而闻名,尤其适合...

    微信电商-拼团 倒计时小程序.rar

    微信电商-拼团 倒计时小程序,这种效果在淘宝、天猫、京东的手机客户端中经常见到,当拼团或抢购开始时,会显示出倒计时,告诉用户商品还需要多长时间拼团,一般用于购物网站,当然,如果有基础的用户完全可以修改这...

    用MFC制作一个倒计时小程序

    **MFC倒计时小程序详解** MFC(Microsoft Foundation Classes)是微软提供的一个C++类库,用于构建Windows应用程序。这个“用MFC制作的倒计时小程序”是一个基于MFC框架开发的实用工具,其核心功能是实现时间的倒...

    VC制作的倒计时小程序

    【VC制作的倒计时小程序】是一个利用Visual C++(简称VC)开发的简单应用程序,它的主要功能是帮助用户计算并显示从当前时间到用户自定义日期之间的剩余时间,即倒计时。这个小程序适用于各种场景,比如考试、生日、...

    考研倒计时的小程序。

    总的来说,考研倒计时小程序是考研人不可或缺的备考工具之一,它通过提供一个可视化的倒计时,帮助考生合理安排复习计划,增强备考信心,提高学习效率。同时,选择合适的小程序并正确使用,也能在一定程度上缓解备考...

    小程序获取验证码倒计时

    通过查看源代码,开发者可以学习到如何在小程序中实现一个完整的验证码发送与倒计时功能。 总之,小程序获取验证码倒计时是提高用户安全性并优化注册、登录体验的关键步骤。理解其背后的工作原理和实现方式,对于...

    倒计时小程序--音乐提醒

    【倒计时小程序--音乐提醒】是一款实用的定时提醒工具,特别之处在于它不仅具备基本的倒计时功能,还能在计时结束时播放用户自定义的音乐,以达到更直观、更个性化的提醒效果。这款应用是基于.NET框架开发的,因此...

    微信小程序-精美倒计时动画

    在微信小程序中实现一个精美倒计时动画,需要掌握以下几个核心知识点: 1. **微信小程序基础知识**:首先,你需要了解微信小程序的基本结构和开发环境。微信小程序由JSON配置文件、WXML(结构层语言)、WXSS(样式...

    微信小程序 倒计时 下载

    倒计时功能在微信小程序中非常实用,可以应用于各种场景,如考试倒计时、生日提醒、活动预告等。秒表功能则为用户提供实时计时服务,适用于体育比赛、健身训练等多种场合。 在开发微信小程序的倒计时功能时,我们...

    c#倒计时小程序高考,毕业倒计时,c#小程序

    【C#倒计时小程序开发详解】 C#是一种面向对象的编程语言,广泛应用于Windows桌面应用、游戏开发、Web服务等多个领域。在这个“C#倒计时小程序高考,毕业倒计时”项目中,我们将探讨如何利用C#来创建一个简单易用且...

Global site tag (gtag.js) - Google Analytics