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 相关文章推荐
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
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 isset()与empty()的使用区别详解
2010/08/29 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
php简单截取字符串代码示例
2016/10/19 PHP
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
在Python中增加和插入元素的示例
2018/11/01 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
浅谈Python中的继承
2020/06/19 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
工厂厂长的职责
2013/12/12 职场文书
给学校建议书范文
2014/05/13 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js