var syj={};//定义空对象,此对象用于模拟命名空间,相当于模拟java中的包路径
syj.TableSorter=function(tb,iStart,iEnd){//定义表格排序函数,此函数用于模拟表格排序类
this.oTable=document.getElementById(tb);//一个排序类对象仅对应一个表
this.iStart=iStart==null?1:iStart;//表头不需要排序的前n行
this.iEnd=iEnd==null?0:iEnd;//表尾不需要排序的后n行
this.orderMap={};//存放每列排序状态的Map容器
this.compareFuncMap={};//存放每列排序函数的Map容器
}
syj.TableSorter.prototype.sort=function(triger,type){//定义表格排序类的排序方法
var oTbody=this.oTable.tBodies[0];
var oRows=this.oTable.rows;//全部的rows(行)对象
var aRowsList=[];//存放待排序的rows
var aEndRowsList=[];//存放表尾不需要排序的rows
var iLength=oRows.length;//表总行数
if(this.iStart+this.iEnd>=iLength){
return ;//表中无数据
}
var oDocFrag=document.createDocumentFragment();//创建一个临时用的dom对象
for(var i =this.iStart;i<iLength-this.iEnd;i++){//向数组中添加待排序的row对象
aRowsList.push(oRows[i]);
}
aRowsList.sort(this.generateCompareFunc(triger,type));//利用数组的sort方法对数组进行排序
for(var i =iLength-this.iEnd;i<iLength;i++){//添加表尾不参与排序的row对象
aEndRowsList.push(oRows[i]);
}
if(this.orderMap[triger.cellIndex]=='asc'){
for(var i=aRowsList.length-1;i>=0;i=i-1){//反向append
oDocFrag.appendChild(aRowsList[i]);
}
}else{
for(var i=0,iRowLength=aRowsList.length;i<iRowLength;i++){//正向append
oDocFrag.appendChild(aRowsList[i]);
}
}
for(var i=0,iRowLength=aEndRowsList.length;i<iRowLength;i++){//追加表尾没参与排序的rows
oDocFrag.appendChild(aEndRowsList[i]);
}
oTbody.appendChild(oDocFrag);//把临时dom对象(其中存放了排序后的rows)挂到表上
this.switchOrder(triger.cellIndex);//改变当前列的排序状态标识
oTbody=null,oRows=null,aRowsList=null,aEndRowsList=null,iLength=null,oDocFrag=null;
}
syj.TableSorter.prototype.switchOrder=function(idx){
var order=this.orderMap[idx];
order=(order==null||order=='desc')?'asc':'desc';
this.orderMap[idx]=order;
}
syj.TableSorter.prototype.toDate=function(ds){//字符串转成日期类型 格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd
var d = new Date(Date.parse(ds));
if (isNaN(d)){
var arys= ds.split('-');
d = new Date(arys[0],arys[1]-1,arys[2]);
}
return d;
}
syj.TableSorter.prototype.getCellValue=function(cell,func){//取cell的值,
return func==null?cell.innerText:func(cell);//默认取td中的文字,如果指定了onsort则执行onsort中的函数取值
}
syj.TableSorter.prototype.generateCompareFunc=function(triger,type){//生成排序函数
var idx=triger.cellIndex;//列的下标
var func=this.compareFuncMap[idx];//先在map中找,找不到再新建
if(func!=null) {
return func;
}
var instance=this;//闭包引用层次太深了,需要此引用
var onsortFunc=window[triger.onsort];//利用反射取得onsort定义的函数
if(type=="STRING"){
func=function compare(a,b){
var x=instance.getCellValue(a.cells[idx],onsortFunc);
var y=instance.getCellValue(b.cells[idx],onsortFunc);
x=x==null?'':x;
y=y==null?'':y;
return x.localeCompare(y);//调用本地的比较函数,汉字按首字拼音排序
}
}else if(type=="NUMBER"){
func=function compare(a,b){
var x=instance.getCellValue(a.cells[idx],onsortFunc);
var y=instance.getCellValue(b.cells[idx],onsortFunc);
x=x==null?0:x;
y=y==null?0:y;
x=x.replace(/[^\d|.|-]/g,"");//去掉除-.以外的其他字符
y=y.replace(/[^\d|.|-]/g,"");
return x*1-y*1;
}
}else if(type=="DATE"){
func=function compare(a,b){
var x=instance.getCellValue(a.cells[idx],onsortFunc);
var y=instance.getCellValue(b.cells[idx],onsortFunc);
var d='1900-01-01';
var x=instance.toDate(x==''?d:x);
var y=instance.toDate(y==''?d:y);
var z=x-y;
return z;
}
}
this.compareFuncMap[idx]=func;
return func;
}
<html><head>
<title></title>
<script type="text/javascript" src="tableSort.js"></script>
<script language=javascript>
function init(){
//针对mainTable表创建排序对象sorter
window.sorter=new syj.TableSorter('mainTable',2,1);
}
function getValue(cell){//自定义取值(用于比较大小的值)函数,用onsort指定
return cell.childNodes[0].value;
}
</script>
</head>
<body onload="init();">
<table id='mainTable' border="1" style="border-collapse: collapse;" cellpadding="3">
<tr>
<td colspan="4">点击表头进行排序</td>
</tr>
<tr>
<th onclick="sorter.sort(this,'NUMBER')" style="cursor: hand;">数字包括金额</th>
<th onclick="sorter.sort(this,'STRING')" style="cursor: hand;">英文按首字母排序</th>
<th onclick="sorter.sort(this,'STRING')" style="cursor: hand;" onsort="getValue" >支持取input的值</th>
<th onclick="sorter.sort(this,'DATE')" style="cursor: hand;">支持多种日期格式</th>
</tr>
<tr>
<td align="right">100</td>
<td>liuguang</td>
<td><input value="刘广"></td>
<td>07-31-1997</td>
</tr>
<tr>
<td align="right">0.99</td>
<td>wangpeng</td>
<td><input value="王鹏"></td>
<td>2008-08-31</td>
</tr>
<tr>
<td align="right">3,313.32</td>
<td>sunyong</td>
<td><input value="孙浩"></td>
<td>12-31-2006</td>
</tr>
<tr>
<td align="right">990000</td>
<td>eclipse</td>
<td><input value="按拼音排序"></td>
<td>2006/06/30</td>
</tr>
<tr><td colspan="4">不参与排序的行,自定义前后不参与排序的行数</td></tr>
</table>
</body>
</html>
