コードをコピー コードは次のとおりです:
var Class={
create:function(){
return function(){
this.init.apply(this,arguments)
}
}
}
function each(o,fn){
for(var j=0,len=o.length;jfn(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); // 到達テーブル元素
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=オプション||{};
this.finish=this.options.fn||function(){};
this.dataIndex=Math.abs(this.options.data)||null;// 比較的データ タイプの座標を提供します。
this.file=Math.abs(this.options.fileType)||null;//比較する必要があるファイル タイプの座標を指定します
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()//Testソート時間用 ソート時間をテストしたい場合は、コメントして削除してください
//他のクリックされた元のキャンセルアイコン
(this.Index!=null&&this.Index!=num)&&this.th[this.インデックス].setAttribute('sorted','');
this.th[num].getAttribute('sorted')!='ed'?
this.rowArr.sort(this.naturalSort.bind( this,num )):this.rowArr.reverse();
//現在のオブジェクトがクリックされている場合は、reverse() に対応する列を使用して順序を直接逆転させます。それ以外の場合は、事前定義された sort() によりソートされます。メソッドが使用されるため、ソートを実行する関数
// にソートする必要がある列の添字値を知りたい場合、bind() は num を渡して、これを呼び出します。
var frag=document.createDocumentFragment ();//ドキュメントフラグメントを作成します
each(this.rowArr,function(o){frag.appendChild(o)});//ソートされた配列をドキュメントフラグメントに挿入します
this.tbody.appendChild( frag);//フラグメント Node
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 はバインド メソッドによって渡され、並べ替える必要があるセル内のコンテンツを見つけます
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(),//ファイルタイプがある場合は、順序を逆にします。
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 if ( ( parseFloat( xN[cLoc] ) | | true
return -1;
else if ( ( parseFloat( xN[cLoc] ) || xN[cLoc] ) > ( parseFloat( yN[cLoc] ) || yN[cLoc] ) )
return 1;
return 0;
}
}
関数 subData(o,i,len) )//データサイズのソートがある場合は、データの td にカスタム属性を追加します/ /レギュラーも判定できます//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;
color:#666;
>background:url(room-bg.gif) 0 -13pxrepeat-x ;
}
table#tb td {
border-bottom:#ccc 1px Solid;
padding:.3em 0 .3em 0;
}
#tb th {
高さ:30px;
パディング右:16px; tb thead tr{
}
#tb td.highLight {color:#000;}
#tb th.selectUp {
background:url(up1.png) no -リピート右中央透明
}
#tb th.selectDown {
background:url(down1.png) リピートなし右中央透明
}
#tb tfoot {
font-weight:bold;
color:#06F;
background :url(room-bg.gif) 0 -13pxrepeat-x ;
パッケージのダウンロード
http://www.jb51.net/jiaoben/32017.html