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 相关文章推荐
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
vue-cli3跨域配置的简单方法
Sep 06 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP URL路由类实例
2013/11/12 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
常见的python正则用法实例讲解
2016/06/21 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
为什么group by 和order by会使查询变慢
2014/05/16 面试题
青年教师典范事迹材料
2014/01/31 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python