JavaScript ソートテーブルsorting_javascriptスキル

1. JavaScript の Sort メソッドを本当に理解していますか?
2. JavaScriptのlocaleCompareメソッドの関数本体をご存知ですか？
3. テーブルのソート方法にはどのようなパラメータが必要ですか?
JavaScript の sort メソッドは、1 つずつ判断するループを記述する必要がなく、直接ソート機能を提供します。ただし、仕組みは同じです。

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

ウィンドウ.onload= function(){
var MyArr=new Array("red","green","gray");
MyArr.sort()
alert(MyArr.toString());
}

出力結果は灰色、緑色、赤色です。これが整数の場合はどうなるでしょうか。

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

window.onload=function(){
var MyArr=new Array(2,25,7);
MyArr.sort();
}

あなたはそれが 2、7、25 だと思っていますが、結果は 2、25、7 であると喜んで言えます。なぜですか?ソート方法は文字列の ASCII に基づいて判断されるため、文字列以外の文字列は最初に文字列
に変換されるため、上記の状況が発生します。では、整数を並べ替えたい場合はどうすればよいでしょうか?変換は非常に簡単ですが、Float や Date などがあった場合はどうすればよいでしょうか。どれも同じで、変換関数を書くだけです。言ったことは必ず実行しなければなりません。

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

function Convert(DataValue,DataType){
switch (DataType){
case "int":
return parseInt(DataValue);
case "float":
return parseFloat(DataValue):
return new Date(Date.parse(DataValue));
default:
return DataValue.toString();
}
}


非常に単純な変換メソッドはDateですので注意してください。基本型とは異なり、毎回新しいオブジェクトが生成されます。

Sort メソッドには sortfunction というパラメーターを含めることができます。
まず簡単な並べ替えメソッドを見てみましょう

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

function Compare_function(value1,value2){

if(value1return
else if(value1>value2)
return 1;
else
return 0;
}


実際、localeCompare 関数もこれに似ています。 value1 が value2 より小さい場合、-1 が返されます。つまり、順序は並べ替えられます。value1本題に戻りますが、テーブルを並べ替えたい場合は、並べ替えるテーブルのヘッダーをクリックします。 SortTable というメソッドが必要です。では、テーブルの特定の列を並べ替えるにはどのようなパラメータが必要ですか。テーブル？まず、どのテーブルを決定するためにテーブル ID が必要です。次に、どの列を並べ替えるかを
決定する必要があります。最後に、各列のデータは必ずしも文字列である必要はないため、データ型パラメーターが必要です。 SortTable(TableID,Col ,DataType);

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

var DTable=document.getElementById(TableID );

var DBody=DTable.tBodies[0];
var MyArr=new Array;配列
for (var i=0;iMyArr[i]=DataRows[i];
}
MyArr.sort(CustomCompare(Col, DataType));
//ドキュメント フラグメントを作成し、そこにすべての行を追加します。これは、一時的なストレージ ラックに相当します。(document.body に直接追加した場合、行が 1 回挿入されて更新されます)データが多すぎると、ユーザーのエクスペリエンスに影響します)
//最初にすべての行を一時シェルフに配置し、次に一時シェルフの行を document.body に追加します。更新されるのは 1 回だけです。
//お店で買い物をするときと同じように、まず買いたい商品（行）をすべてリスト（文書の断片）に書き出し、次にスーパーマーケットで1つだけを考えずにすべて購入します。次に、
var frag=document.createDocumentFragment();
for(var i=0;ifrag.appendChild(MyArr[i]);配列内のすべての行をドキュメント フラグメントへ
}
DBody.appendChild(frag);//ドキュメント フラグメント内のすべての行をボディに追加します


このようにして並べ替えを完了すると、Sort メソッドのパラメーターとしてカスタマイズされた並べ替えメソッドである CustomCompare 関数が存在します。この関数には 2 つのパラメーターがあり、1 つは並べ替えられた列、もう 1 つはデータです。タイプ。
関数本体は

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

return 関数CompareTRs(TR1, TR2){
var value1,value2;
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType);
value2=convert(TR2.cells[Col]); firstChild.nodeValue, DataType);
if(value1 < value2)
return -1;
else if(value1 > value2)
return 1;
else
return 0 ;
};

もちろん、この形式で記述できるのはクロージャのおかげです。 sort メソッドでは、配列内の各項目 (各項目はテーブルの各行を格納します) を反復処理し、パラメーターを CompareTRs(TR1,TR2) に渡し、結果を返します。
実際にはこれで問題ありませんが、写真を並べ替えたい場合はどうすればよいでしょうか?
それはどのような種類の写真ですか?わからないので、画像のタイトルまたは alt 属性を使用してみましょう。これらは常に文字列にすることができます。カスタム プロパティcustomvalueを指定し、その値で並べ替えます。この属性が含まれているかどうかを判断するために
を実装する場合、CompareTRs メソッドを変更する必要があります。

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

function CustomCompare(Col,DataType){
return function CompareTRs(TR1,TR2){
var value1,value2;
//customvalue 属性があるかどうかを判断します
if(TR1.cells[Col].getAttribute("customvalue")) {
value1=convert(TR1.cells[Col].getAttribute("customvalue"),DataType);
value2=convert(TR2.cells[Col].getAttribute("customvalue"),DataType); 🎜>}
else{
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType);
value2=convert(TR2.cells[Col].firstChild.nodeValue,DataType);
}
if(value1 < value2)
return -1;
else if(value1 > value2)
return
else
return
};
}

写真の並べ替えも解決されました。ユーザーが複数回並べ替えて複数回クリックしたい場合はどうすればよいでしょうか? CompareTRs メソッドを変更する必要がありますか?
明らかに必要ではありませんが、JavaScript には配列内の各項目を反転できる reverse() メソッドがあります。 SortTable メソッドへの変更は次のようにするだけで済みます

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

function SortTable(TableID,Col,DataType){
var DTable=document.getElementById(TableID);
var DBody=DTable.tBodies[0];
var DataRows=DBody.rows;
var MyArr=new Array;
for(var i=0;iMyArr[i]=DataRows[i];最後にソートされた列の合計を判定します。今回は同じ列ですか?
if(DBody.CurrentCol==Col){
MyArr.reverse(); //配列を反転します
}
else{
MyArr.sort(CustomCompare (Col,DataType));
}
// ドキュメントのフラグメントを作成し、それにすべての行を追加します。これは一時的なストレージ シェルフに相当します。 document.body に直接追加すると、挿入されます。データが多すぎると、1 行が 1 回更新されます。
//まず、すべての行を一時保管棚に置きます。一時記憶棚の行を document.body に追加すると、テーブルのみが 1 回更新されます。
//お店で買い物をするときと同じように、まず買いたい商品（行）をすべてリスト（文書の断片）に書き出し、次にスーパーマーケットで1つだけを考えずにすべて購入します。次に、
var frag=document.createDocumentFragment();
for(var i=0;ifrag.appendChild(MyArr[i]);配列内のすべての行をドキュメント フラグメントに追加します
}
DBody.appendChild(frag);//ドキュメント フラグメント内のすべての行をボディに追加します
DBody.CurrentCol=Col; //現在を記録します。 sorted columns
}


JavaScript では大文字と小文字の区別が間違いやすいため、必ず注意してください。
上記のコードは正常にテストされ、日付の並べ替えの効果は次のとおりです

すべてのコード:

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