ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryは中国語のテーブルに従ってソートを実装します

jqueryは中国語のテーブルに従ってソートを実装します

php中世界最好的语言
リリース: 2018-04-26 16:10:07
オリジナル
1679 人が閲覧しました

今回は、中国語のテーブルに従ってソートするための jquery を紹介します。 jquery が中国語のテーブルに従ってソートを実装するための 注意点 について、実際のケースを見てみましょう。

//转换器,将列的字段类型转换为可以排序的类型:String,int,float 
function convert(sValue, sDataType) 
{ 
switch(sDataType) 
{ 
case "int": 
return parseInt(sValue); 
case "float": 
return parseFloat(sValue); 
case "date": 
return new Date(Date.parse(sValue)); 
default: 
return sValue.toString(); 
} 
} 
// 汉字排序方法 
function chrComp(a,b) 
{ 
return a.localeCompare(b); 
} 
//排序函数产生器 
function generateCompareTRs(iCol, sDataType,isinput,sDec) 
{ 
return function compareTRs(oTR1, oTR2) 
{ 
if(isinput == 1) 
{ 
var vValue1 = convert(oTR1.getElementsByTagName("input")[iCol].value); 
var vValue2 = convert(oTR2.getElementsByTagName("input")[iCol].value); 
} 
else 
{ 
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); 
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); 
} 
if(sDec=='desc') 
{ 
if(sDataType=='int') 
{ 
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 <0 ? 1 : -1); 
} 
else if(sDataType ==&#39;cn&#39;) 
{ 
if(chrComp(vValue1,vValue2)>0) 
{ 
return -1; 
} 
else if(chrComp(vValue1,vValue2)<0) 
{ 
return 1; 
} 
else 
{ 
return 0; 
} 
} 
else 
{ 
if (vValue1 > vValue2) { 
return -1; 
} else if (vValue1 < vValue2) { 
return 1; 
} else { 
return 0; 
} 
} 
} 
else if(sDec==&#39;asc&#39;) 
{ 
if(sDataType==&#39;int&#39;) 
{ 
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 >0 ? 1 : -1); 
} 
else if(sDataType ==&#39;cn&#39;) 
{ 
return chrComp(vValue1,vValue2); 
} 
else 
{ 
if (vValue1 > vValue2) { 
return 1; 
} else if (vValue1 < vValue2) { 
return -1; 
} else { 
return 0; 
} 
} 
} 
}; 
} 
//重置单元格的classname 
function ChangeClsName(tr,num) 
{ 
num = num%2?1:2; 
num.toString(); 
for ( var i = 0 ; i < tr.childNodes.length; i ++ ) 
{ 
tr.childNodes[i].className = "row" + num 
} 
} 
/*排序方法(主函数)
ログイン後にコピー

sTableID テーブル ID
iCol は列インデックスを表します
1、入力タイプではない場合、iCol は tr の td を表します;
2、入力タイプの場合、iCol はこの tr の td を表します。
sDataType はセルの データ型 または入力値のデータ型を表します。デフォルトは string ですが、int、float も可能です。 cn は中国語です
isinput は並べ替えられたコンテンツが入力されているかどうかを示します (1 はい) 、0 いいえ)
sDec は、入力値が変更された後にソートするときに直接の逆順を避けるために、逆順または順序 (desc、デフォルトの順序) を示します。

*/ 
function sortTable(sTableID, iCol, sDataType, isinput, sDec) 
{ 
var oTable = 
document
.getElementById(sTableID); 
var oTBody = oTable.tBodies[0]; 
var colDataRows = oTBody.rows; 
var aTRs = new Array; 
//将所有列放入数组 
for (var i=0; i < colDataRows.length; i++) 
{ 
aTRs[i] = colDataRows[i]; 
} 
aTRs.sort(generateCompareTRs(iCol, sDataType,isinput, sDec)); 
var oFragment = document.createDocumentFragment(); 
for (var i=0; i < aTRs.length; i++) 
{ 
oFragment.appendChild(aTRs[i]); 
ChangeClsName(aTRs[i],i); 
} 
oTBody.appendChild(oFragment); 
}
ログイン後にコピー

今週はついに、ずっと学びたかったjqueryを勉強する時間が取れました。会社で使えないのは残念ですが、実際、習った後でも使えると感じています。 jqery を知った後、他の人のプラグインを見てみました。 jquery.tablesorter.js このプラグインは非常に強力です。試してみたところ、中国語には対応していないことが分かりました。 ソース コードの内容を見てください

/* sorting methods */ 
function multisort(table,sortList,cache) { 
if(table.config.debug) { var sortTime = new Date(); } 
var dynamicExp = "var sortWrapper = function(a,b) {", l = sortList.length; 
for(var i=0; i < l; i++) { 
var c = sortList[i][0]; 
var order = sortList[i][1]; 
var s = (getCachedSortType(table.config.parsers,c) == "text") ? ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ? "sortNumeric" : "sortNumericDesc"); 
var e = "e" + i; 
dynamicExp += "var " + e + " = " + s + "(a[" + c + "],b[" + c + "]); "; 
dynamicExp += "if(" + e + ") { return " + e + "; } "; 
dynamicExp += "else { "; 
} 
for(var i=0; i < l; i++) { 
dynamicExp += "}; "; 
} 
dynamicExp += "return 0; "; 
dynamicExp += "}; "; 
eval(dynamicExp); 
cache.normalized.sort(sortWrapper); 
if(table.config.debug) { benchmark("Sorting on " + sortList.toString() + " and dir " + order+ " time:", sortTime); } 
return cache; 
}; 
function sortText(a,b) { 
return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
}; 
function sortTextDesc(a,b) { 
return ((b < a) ? -1 : ((b > a) ? 1 : 0)); 
}; 
function sortNumeric(a,b) { 
return a-b; 
}; 
function sortNumericDesc(a,b) { 
return b-a; 
}; 
function getCachedSortType(parsers,i) { 
return parsers[i].type; 
};
ログイン後にコピー

最初は、いくつかの困難に遭遇するだろうと思いました。意外なことに、彼の並べ替え機能を変更するだけで問題ありません。

function sortText(a,b) { 
return a.localeCompare(b); 
}; 
function sortTextDesc(a,b) { 
return -a.localeCompare(b); 
};
ログイン後にコピー

テストしてください。中国語、中国語、英語合わせて真ん中に欄があれば問題ありません。
本来、このプラグインには圧縮後のjquery.tablesorter.pack.jsが9kbしかありませんが、jquery.tablesorter.js(23kb)のみ変更します。これを jquery.tablesorter.pack.js に変換する方法がわかりません。
追記: もちろん、このプラグインには、複数列の並べ替え、さまざまな例など、多くの拡張機能もあります。参考用のドキュメントもあります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jquery はテーブルのページングとソートを実装します

jQuery のクロスドメイン iframe インターフェイス呼び出し (コード付き)

以上がjqueryは中国語のテーブルに従ってソートを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート