jquery는 중국어 테이블에 따라 정렬을 구현합니다.
- php中世界最好的语言원래의
- 2018-04-26 16:10:071662검색
이번에는 중국 테이블에 따라 정렬하는 jquery를 가져오겠습니다. jquery가 중국 테이블에 따라 정렬을 구현하는 데 필요한 notes는 무엇입니까?
//转换器，将列的字段类型转换为可以排序的类型：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 =='cn')
{
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=='asc')
{
if(sDataType=='int')
{
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 >0 ? 1 : -1);
}
else if(sDataType =='cn')
{
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은 셀의 데이터 유형 또는 입력 값의 데이터 유형을 나타냅니다. 기본값은 문자열이지만 int일 수도 있고, float도 가능합니다. cn은 중국어입니다.
isinput은 정렬된 내용이 입력인지 여부를 나타냅니다(1 yes). , 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);
};테스트해 보세요. 중국어, 중국어, 영어를 합쳐서 중간에 열이 있으면 문제 없습니다.
원래 이 플러그인에는 압축 후 크기가 9kb에 불과한 jquery.tablesorter.pack.js가 있는데 jquery.tablesorter.js(23kb)만 변경하겠습니다. jquery.tablesorter.pack.js로 변환하는 방법을 모르겠습니다.
ps: 물론 이 플러그인에는 다중 열 정렬, 다양한 예제 등 많은 확장 기능도 있습니다. 참고할 수 있는 문서가 있습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
jQuery 도메인 간 iframe 인터페이스 호출(코드 포함)
위 내용은 jquery는 중국어 테이블에 따라 정렬을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!