JavaScript複数データ型テーブルソートコード分析_JavaScriptスキル

漢字ソート、
中国語・英語混合ソート、
データサイズソート、
ファイルタイプソート（サフィックス名ソート）
日時ソート、
価格ソート、
中国語混合数値ソート ;
使用法: ドキュメントがロードされた後の new tableListSort(arguments,arguments)。

は 2 つのパラメータを受け入れます。最初のパラメータは必須で、文字列 ID またはテーブル オブジェクトにすることができます。2 番目のオプションのパラメータはオブジェクト、{data:index,fileType :index,fn:function(){}オブジェクトには 3 つのオプションの属性があり、1 つ目と 2 つ目は拡張ソートのデータ型で、3 つ目のパラメータはテーブル データに必要なデータ サイズがある場合に実行する必要がある関数です。 1KB 1MB 1GB などのソート済みの場合は、{data:index} を使用できます。インデックスは、0 から数えてソートする必要があるテーブル内の列の添字値です。たとえば、テーブルの 2 番目の列は 1KB データです。 MB、{data:2} などのタイプ、オブジェクトの 2 番目の属性 {fileType:index}、この拡張子は、xml、jpg、exe、その他のサフィックス名などのファイル タイプに分類されます。インデックスは列の添字値でもあります。

オブジェクトの 3 番目のオプション属性は、ソート後に実行する必要がある関数 {fn:function(){実行コード}} です。

HTML コードに必要な要素は次のとおりです。 table 要素の最初の行には、tr を含めるために thead 要素を使用する必要があり、tr には、thead の次の兄弟要素が含まれている必要があります。 tbody の場合、tbody には tr が含まれている必要があります。ソートされたデータは td を使用して含められ、表にはキャプションと tfoot を含めることもできます。

4月11日更新：ソート後の昇順・降順を示すアイコンを追加しました。
クラスの追加をカスタマイズする この属性を追加する予定がない場合は、マウス スタイル mymickey がスクリプトに追加されるため、CSS を追加する必要はありません。
table.Index は最後にソートされた座標値です; table.Index は null に初期化されます;
fn: fn:fini 関数はソート後にのみ実行する必要があります。ソート後に実行する必要がある関数は、下へのソートと上へのソートのアイコンを追加するだけです。

コードをコピー コードは次のとおりです:

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){//その他のクリックされたオリジナルがキャンセルされましたicon
table .th[table.Index].className='';
}
}

var table=new tableListSort($('tb'),{data:8, fileType:9,fn :fini})//ドキュメントがロードされた後、新しいパラメータが渡されます
}

コードをコピー コードは次のとおりです:

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