快捷導(dǎo)航

javascript多種數(shù)據(jù)類型表格排序代碼分析

更新時(shí)間：2010年09月11日 03:08:02 作者：

這個(gè)表格排序代碼，性能比上一次那一個(gè)好了很多而且支持很多種類型的排序，這一次寫的能支持更多的排序。

中文漢字排序、
中英文混合排序、
數(shù)據(jù)大小排序、
文件類型排序(后綴名排序)
日期時(shí)間排序、
價(jià)格排序、
中文混合數(shù)字排序;
使用方法:文檔載入后new tableListSort(arguments,arguments)。

接受兩個(gè)參數(shù)：第一個(gè)參數(shù)為必須的，可以是字符串ID，也可以是table對(duì)象;第二個(gè)可選參數(shù)，此參數(shù)為一個(gè)對(duì)象，{data:index,fileType:index,fn:function(){}}；對(duì)象有三個(gè)可選的屬性，第一個(gè)和第二個(gè)為擴(kuò)展排序的數(shù)據(jù)類型，第三個(gè)參數(shù)為排序后需要執(zhí)行的函數(shù)；如果表格數(shù)據(jù)中有需要排序的數(shù)據(jù)大小，如1KB 1MB 1GB 這樣的數(shù)據(jù)類型的話,可以{data:index};index為表格需排序的某一列的下標(biāo)值，從0開始計(jì)數(shù)，如表格的第二列為1KB MB這樣的數(shù)據(jù)類型，{data:2};對(duì)象的第二個(gè)屬性{fileType:index},此擴(kuò)展排序?yàn)槲募愋?，如xml,jpg,exe這樣的后綴名。index同樣為列的下標(biāo)值。

對(duì)象的第三個(gè)可選屬性為一個(gè)排序后需執(zhí)行的函數(shù){fn:function(){執(zhí)行的代碼}}。

HTML代碼中必須的元素為:table元素，table元素的第一行必須使用thead元素包含tr,tr中必須包含可點(diǎn)擊排序的元素th;thead下一個(gè)sibling元素必須為tbody,tbody中需包含tr。排序數(shù)據(jù)使用td包含，table也可以包含caption和tfoot。

4月 11日, 更新:添加了排序后升序降序的標(biāo)示圖標(biāo)。
自定義添加class 如果不打算添加此屬性可以為不設(shè)置，鼠標(biāo)樣式mymickey在腳本里面加好了不需要CSS添加。
table.Index為上一次被排序過(guò)的坐標(biāo)值;table.Index初始化為null;
fn:fini函數(shù)僅為排序過(guò)后需要執(zhí)行的函數(shù)，就算沒(méi)有它也是可以排序的,這里傳遞一個(gè)排序過(guò)后需要執(zhí)行的函數(shù)僅僅是為了添加排序down和up的標(biāo)示圖標(biāo).

以下的源代碼：

復(fù)制代碼代碼如下:

 
window.onload=function(){ 
function fini(num){ 
table.th[num].className= 
table.th[num].className=='selectUp'? 
'selectDown':'selectUp';//切換標(biāo)示圖標(biāo) 

each(table.Row,function(o){//highLight高亮當(dāng)前排序的列 
o.cells[num].className='highLight'; 
if(table.Index!=null&&table.Index!=num){ 
o.cells[table.Index].className=''; 
} 
}); 
if(table.Index!=null&&table.Index!=num){//另外的被點(diǎn)擊 原先的被取消表示圖標(biāo) 
table.th[table.Index].className=''; 
} 
} 

var table=new tableListSort($('tb'),{data:8,fileType:9,fn:fini})//文檔載入后new傳遞參數(shù) 
} 

復(fù)制代碼代碼如下:

 
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塞入這個(gè)數(shù)組 
this.Index=null; 
this.options=options||{}; 
this.finish=this.options.fn||function(){}; 
this.dataIndex=Math.abs(this.options.data)||null;//提供比較數(shù)據(jù)類型的坐標(biāo)。 
this.file=Math.abs(this.options.fileType)||null;//提供需要比較file類型坐標(biāo) 
each(this.Row,function(o){this.rowArr.push(o)}.bind(this));//將tr對(duì)象列表載入進(jìn)數(shù)組 
for(var i=0;this.th.length>i;i++){ 
this.th[i].onclick=this.Sort.bind(this,i)//使用bind間接保持一個(gè)下標(biāo)值(變量)，傳遞過(guò)去 
this.th[i].style.cursor='pointer'; 
} 
this.re=/([-]{0,1}[0-9.]{1,})/g;// 替換的正則表達(dá)式 
this.dataIndex&&subData(this.Row,this.dataIndex,this.Row.length); 
}, 

Sort:function(num){ 
//var date1=new Date().getTime()//測(cè)試用于排序時(shí)間 如果想測(cè)試排序時(shí)間請(qǐng)講注釋去掉 
//另外的被點(diǎn)擊 原先的被取消表示圖標(biāo) 
(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(); 
//如果當(dāng)前對(duì)象被點(diǎn)擊過(guò)，使用reverse()對(duì)應(yīng)的列直接反序,否則排序，因?yàn)槭褂玫氖穷A(yù)定義的sort()方法，所以如果要讓執(zhí)行排序的函數(shù) 
//知道需要排序的列的下標(biāo)值的話，bind()傳遞num過(guò)去，this來(lái)調(diào)用; 
var frag=document.createDocumentFragment();//創(chuàng)建文檔碎片 
each(this.rowArr,function(o){frag.appendChild(o)});//將排序后的數(shù)組插入文檔碎片 
this.tbody.appendChild(frag);//碎片插入節(jié)點(diǎn) 
this.th[num].setAttribute('sorted','ed'); 
//$('spans').innerHTML=(new Date().getTime())-date1;//測(cè)試用于排序時(shí)間 如果想測(cè)試排序時(shí)間請(qǐng)講注釋去掉 
this.finish(num);//排序后執(zhí)行的函數(shù) 
this.Index=num;//被排序過(guò)的坐標(biāo)值 
}, 
naturalSort:function (num,a, b) { 
//判斷是否是數(shù)據(jù)排序 如果是的話 查找屬性 
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方法傳遞過(guò)來(lái)的,找到需排序的單元格里面的內(nèi)容 
var x = a.toString().toLowerCase() || '', y = b.toString().toLowerCase() || '', 
nC = String.fromCharCode(0), 
xN = x.replace(this.re, nC + '$1' + nC).split(nC),// 將字符串分裂成數(shù)組 
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] ) ) 
//不能轉(zhuǎn)換為floatNumber直接進(jìn)行字母比較，如'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){//如果有數(shù)據(jù)大小排序給td添加一個(gè)自定屬性給data//正則也是可以的判斷的//mymickey沒(méi)有在這里寫正則 
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); 
} 
} 
} 

復(fù)制代碼代碼如下:

 
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 ; 
} 