javascript多种数据类型表格排序代码分析


Posted in Javascript onSeptember 11, 2010

中文汉字排序、
中英文混合排序、
数据大小排序、
文件类型排序(后缀名排序)
日期时间排序、
价格排序、
中文混合数字排序;
使用方法:文档载入后new tableListSort(arguments,arguments)。

接受两个参数:第一个参数为必须的,可以是字符串ID,也可以是table对象;第二个可选参数,此参数为一个对象,{data:index,fileType:index,fn:function(){}};对象有三个可选的属性,第一个和第二个为扩展排序的数据类型,第三个参数为排序后需要执行的函数;如果表格数据中有需要排序的数据大小,如1KB 1MB 1GB 这样的数据类型的话,可以{data:index};index为表格需排序的某一列的下标值,从0开始计数,如表格的第二列为1KB MB这样的数据类型,{data:2};对象的第二个属性{fileType:index},此扩展排序为文件类型,如xml,jpg,exe这样的后缀名。index同样为列的下标值。

对象的第三个可选属性为一个排序后需执行的函数{fn:function(){执行的代码}}。

HTML代码中必须的元素为:table元素,table元素的第一行必须使用thead元素包含tr,tr中必须包含可点击排序的元素th;thead下一个sibling元素必须为tbody,tbody中需包含tr。排序数据使用td包含,table也可以包含caption和tfoot。

4月 11日, 更新:添加了排序后升序降序的标示图标。
自定义添加class 如果不打算添加 此属性可以为不设置,鼠标样式mymickey在脚本里面加好了不需要CSS添加。
table.Index为上一次被排序过的坐标值;table.Index初始化为null;
fn:fini函数仅为排序过后需要执行的函数,就算没有它也是可以排序的,这里传递一个排序过后需要执行的函数仅仅是为了添加排序down和up的标示图标.

以下的源代码:

window.onload=function(){ 
function fini(num){ 
table.th[num].className= 
table.th[num].className=='selectUp'? 
'selectDown':'selectUp';//切换标示图标 each(table.Row,function(o){//highLight高亮当前排序的列 
o.cells[num].className='highLight'; 
if(table.Index!=null&&table.Index!=num){ 
o.cells[table.Index].className=''; 
} 
}); 
if(table.Index!=null&&table.Index!=num){//另外的被点击 原先的被取消表示图标 
table.th[table.Index].className=''; 
} 
} 
var table=new tableListSort($('tb'),{data:8,fileType:9,fn:fini})//文档载入后new传递参数 
}

var Class={ 
create:function(){ 
return function(){ 
this.init.apply(this,arguments) 
} 
} 
} 
function each(o,fn){ 
for(var j=0,len=o.length;j<len;j++){ 
fn(o[j],j) 
} 
} Function.prototype.bind=function(){ 
var method=this; 
var args=Array.prototype.slice.call(arguments); 
var object=args.shift(); 
return function(){ 
return method.apply(object,args.concat(Array.prototype.slice.call(arguments))) 
} 
} 
function $(elem,elem2){ 
var arr=[]; 
typeof elem=='string' ?arr.push(document.getElementById(elem)):arr.push(elem); 
elem2&&arr.push(arr[0].getElementsByTagName(elem2)); 
(arr.length>1)&&(typeof elem=='object') &&(arr.shift()); 
return arr.length!=2?arr[0]:arr[1]; 
} 
var tableListSort=Class.create() 
tableListSort.prototype={ 
init:function(tables,options){ 
this.table=$(tables);//找到table元素 
this.th=$($(this.table,'thead')[0],'th');//找到th元素 
this.tbody=$(this.table,'tbody')[0];//找到tbody元素 
this.Row=$(this.tbody,'tr'); //找到tr元素 
this.rowArr=[];//tr塞入这个数组 
this.Index=null; 
this.options=options||{}; 
this.finish=this.options.fn||function(){}; 
this.dataIndex=Math.abs(this.options.data)||null;//提供比较数据类型的坐标。 
this.file=Math.abs(this.options.fileType)||null;//提供需要比较file类型坐标 
each(this.Row,function(o){this.rowArr.push(o)}.bind(this));//将tr对象列表载入进数组 
for(var i=0;this.th.length>i;i++){ 
this.th[i].onclick=this.Sort.bind(this,i)//使用bind间接保持一个下标值(变量),传递过去 
this.th[i].style.cursor='pointer'; 
} 
this.re=/([-]{0,1}[0-9.]{1,})/g;// 替换的正则表达式 
this.dataIndex&&subData(this.Row,this.dataIndex,this.Row.length); 
}, 
Sort:function(num){ 
//var date1=new Date().getTime()//测试用于排序时间 如果想测试排序时间请讲注释去掉 
//另外的被点击 原先的被取消表示图标 
(this.Index!=null&&this.Index!=num)&&this.th[this.Index].setAttribute('sorted',''); 
this.th[num].getAttribute('sorted')!='ed'? 
this.rowArr.sort(this.naturalSort.bind(this,num)):this.rowArr.reverse(); 
//如果当前对象被点击过,使用reverse()对应的列直接反序,否则排序,因为使用的是预定义的sort()方法,所以如果要让执行排序的函数 
//知道需要排序的列的下标值的话,bind()传递num过去,this来调用; 
var frag=document.createDocumentFragment();//创建文档碎片 
each(this.rowArr,function(o){frag.appendChild(o)});//将排序后的数组插入文档碎片 
this.tbody.appendChild(frag);//碎片插入节点 
this.th[num].setAttribute('sorted','ed'); 
//$('spans').innerHTML=(new Date().getTime())-date1;//测试用于排序时间 如果想测试排序时间请讲注释去掉 
this.finish(num);//排序后执行的函数 
this.Index=num;//被排序过的坐标值 
}, 
naturalSort:function (num,a, b) { 
//判断是否是数据排序 如果是的话 查找属性 
var a=this.dataIndex!=num?a.cells[num].innerHTML:a.cells[num].getAttribute('data'), 
b=this.dataIndex!=num?b.cells[num].innerHTML:b.cells[num].getAttribute('data'); 
//num被bind方法传递过来的,找到需排序的单元格里面的内容 
var x = a.toString().toLowerCase() || '', y = b.toString().toLowerCase() || '', 
nC = String.fromCharCode(0), 
xN = x.replace(this.re, nC + '$1' + nC).split(nC),// 将字符串分裂成数组 
yN = y.replace(this.re, nC + '$1' + nC).split(nC), 
xD = (new Date(x)).getTime(), yD = (new Date(y)).getTime() 
xN = this.file!=num?xN:xN.reverse(),//如果有filetype则反序 
yN = this.file!=num?yN:yN.reverse() 
if ( xD && yD && xD < yD ) 
return -1; 
else if ( xD && yD && xD > yD ) 
return 1; 
for ( var cLoc=0, numS = Math.max( xN.length, yN.length ); cLoc < numS; cLoc++ ) 
if ( ( parseFloat( xN[cLoc] ) || xN[cLoc] ) < ( parseFloat( yN[cLoc] ) || yN[cLoc] ) ) 
//不能转换为floatNumber直接进行字母比较,如'A'<'B' print//true 
return -1; 
else if ( ( parseFloat( xN[cLoc] ) || xN[cLoc] ) > ( parseFloat( yN[cLoc] ) || yN[cLoc] ) ) 
return 1; 
return 0; 
} 
} 
function subData(o,i,len){//如果有数据大小排序给td添加一个自定属性给data//正则也是可以的判断的//mymickey没有在这里写正则 
for(var j=0;len>j;j++){ 
if(o[j].cells[i].innerHTML.substring(o[j].cells[i].innerHTML.lastIndexOf('KB')).toLowerCase()=='kb'){ 
o[j].cells[i].setAttribute('data',parseFloat(o[j].cells[i].innerHTML)*1024); 
} 
if(o[j].cells[i].innerHTML.substring(o[j].cells[i].innerHTML.lastIndexOf('MB')).toLowerCase()=='mb'){ 
o[j].cells[i].setAttribute('data',parseFloat(o[j].cells[i].innerHTML)*1000000); 
} 
else if(o[j].cells[i].innerHTML.substring(o[j].cells[i].innerHTML.lastIndexOf('GB')).toLowerCase()=='gb'){ 
o[j].cells[i].setAttribute('data',parseFloat(o[j].cells[i].innerHTML)*1000000000); 
} 
} 
}

table#tb { 
text-align:center; 
border:1px #ccc solid; 
border-collapse:collapse; 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
color:#666; 
width:900px; 
background:url(room-bg.gif) 0 -13px repeat-x ; 
} 
table#tb td { 
border-bottom:#ccc 1px solid; 
padding:.3em 0 .3em 0; 
} #tb th { 
height:30px; 
color:#009; 
padding-right:16px; 
} 
#tb thead tr{ 
} 
#tb td.highLight{color:#000;} 
#tb th.selectUp { 
background:url(up1.png) no-repeat right center transparent ; 
} 
#tb th.selectDown { 
background:url(down1.png) no-repeat right center transparent ; 
} 
#tb tfoot{ 
font-weight:bold; 
color:#06F; 
background:url(room-bg.gif) 0 -13px repeat-x ; 
}

打包下载 https://3water.com/jiaoben/32017.html
Javascript 相关文章推荐
splice slice区别
Oct 09 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
Javascript之String对象详解
Jun 08 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 #Javascript
Js组件的一些写法
Sep 10 #Javascript
编写Js代码要注意的几条规则
Sep 10 #Javascript
jquery之empty()与remove()区别说明
Sep 10 #Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 #Javascript
有趣的javascript数组定义方法
Sep 10 #Javascript
心扬JS分页函数代码
Sep 10 #Javascript
You might like
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php反射应用示例
2014/02/25 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
在python中做正态性检验示例
2019/12/09 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
教师的实习鉴定
2013/12/15 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
民主生活会发言材料
2014/10/20 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
详解MindSpore自定义模型损失函数
2021/06/30 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js