列表排序直接用的这篇作者分享的排序插件: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);//排序 }
最后祝大家好运!
相关推荐
NULL 博文链接:https://1017401036.iteye.com/blog/2395830
VB.NET 15分钟倒计时小程序 VB.NET 15分钟倒计时小程序 VB.NET 15分钟倒计时小程序 VB.NET 15分钟倒计时小程序
微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 (源码)微信小程序 电商-拼团 倒计时 ...
微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信小程序 辩论倒计时 (源码)微信...
微信小程序——电商-拼团 倒计时(截图+源码).zip 微信小程序——电商-拼团 倒计时(截图+源码).zip 微信小程序——电商-拼团 倒计时(截图+源码).zip 微信小程序——电商-拼团 倒计时(截图+源码).zip 微信小...
微信电商-拼团 倒计时小程序,这种效果在淘宝、天猫、京东的手机客户端中经常见到,当拼团或抢购开始时,会显示出倒计时,告诉用户商品还需要多长时间拼团,一般用于购物网站,当然,如果有基础的用户完全可以修改这...
考研倒计时小程序 考研倒计时小程序 考研倒计时小程序
微信小程序-精美倒计时动画,微信小程序-精美倒计时动画,微信小程序-精美倒计时动画,微信小程序-精美倒计时动画,微信小程序-精美倒计时动画,微信小程序-精美倒计时动画,
1. html文件,可以本地运行,也可以部署服务器 2. 可以设置倒计时分钟数,最大60分钟 3. 计时结束可以循环播放音乐直到“取消音乐” 4. 可以在index.html文件中自己更换标题
C#倒计时小程序C#倒计时小程序C#倒计时小程序
小程序源码 电商-拼团 倒计时 (代码+截图)小程序源码 电商-拼团 倒计时 (代码+截图)小程序源码 电商-拼团 倒计时 (代码+截图)小程序源码 电商-拼团 倒计时 (代码+截图)小程序源码 电商-拼团 倒计时 (代码+截图)小...
1、倒计时里面包含功能:将后台时间戳转换成相应的时间、进行时间的倒计 2、该文件直接可以下载组件,下载后直接调用即可 3、调用方法简单 3、初学者必备 4、该组件常用:支付页面、活动倒计时等。
倒计时小程序,VB源代码编写,对以前的程序进行了改进,可以计算年,月,天数和小时等.
微信小程序源码 电商-拼团 倒计时(学习版)微信小程序源码 电商-拼团 倒计时(学习版)微信小程序源码 电商-拼团 倒计时(学习版)微信小程序源码 电商-拼团 倒计时(学习版)微信小程序源码 电商-拼团 倒计时(学习版)微信...
该软件为倒计时软件,专门为考研学子提供的一款精巧方便使用的软件。 方便使用,免安装,不仅可以进行倒计时,还可以使用备忘录
列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码列表倒计时demo代码...
时间的观念在现在的时代越来越重要,考试要定时完成,炒菜做饭要计时完成,甚至连煮包泡面都要计时...本程序下载可直接使用通过命令行输入提示完成计时与倒计时功能 源代码可见本人"自己制作一个计时器、倒计时器"文章
可以对单个,多个boss刷新时间进行重置,对刷新间隔,boss名称地点进行修改
倒计时小程序,简单好用,主要用于短暂的时间,时、分、秒;
大神勿喷,该资源就是一个小程序获取验证码倒计时,很简单