이 기사의 예에서는 테이블 분류기 중국어 정렬 및 문자 범위를 해결하는 Juery의 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
tablesorter는 jQuery 플러그인 중 뛰어난 테이블 정렬 플러그인입니다. 누구나 사용해 본 적이 있거나 들어본 적이 있을 것이라 여기서는 자세한 소개를 생략하겠습니다. 자세한 내용은 공식 사이트를 참조하세요. 웹사이트: http://tablesorter.com/docs/ (데모는 비교적 완벽합니다).
tablesorter를 사용하여 개발된 여러 프로젝트에서 다음과 같은 두 가지 유형의 정렬 문제가 발견되었습니다.
첫 번째 문제는 한자를 정렬할 때 유니코드 값을 사용하여 문자 크기를 비교하기 때문입니다.
JS 코드
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 sortText(a,b) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }; function sortTextDesc(a,b) { return ((b < a) ? -1 : ((b > a) ? 1 : 0)); };
우리가 원하는 결과는 중국어 병음별로 정렬하는 것이므로 코드를 다음 코드로 수정할 수 있습니다.
JS 코드
function sortText(a,b) { return a.localeCompare(b); }; function sortTextDesc(a,b) { return b.localeCompare(a); }; function sortText(a,b) { return a.localeCompare(b); }; function sortTextDesc(a,b) { return b.localeCompare(a); };
localeCompare 메소드는 JS에 포함된 메소드입니다. 이름에서 알 수 있듯이 이 메소드는 현재 지역을 기준으로 문자 크기를 비교합니다. 그러나 이 메소드는 다성 문자를 처리할 수 없습니다.
두 번째 문제는 범위를 벗어난 숫자 데이터를 정렬할 수 없다는 점입니다. 이는 숫자 유형 변환 시 데이터 값이 왜곡되기 때문입니다.
JS 코드
alert(parseFloat('9999999999999999')); // 10000000000000000 alert(parseFloat('10000000000000001')); // 10000000000000000 alert(parseFloat('10000000000000004')); // 10000000000000004 alert(parseFloat('10000000000000005')); // 10000000000000004 alert(parseFloat('10000000000000006')); // 10000000000000006 alert(parseFloat('9999999999999999')); // 10000000000000000 alert(parseFloat('10000000000000001')); // 10000000000000000 alert(parseFloat('10000000000000004')); // 10000000000000004 alert(parseFloat('10000000000000005')); // 10000000000000004 alert(parseFloat('10000000000000006')); // 10000000000000006
이러한 편차는 정렬 결과를 부정확하게 만듭니다. 이 문제를 방지하려면 원래 값을 비교에 사용해서는 안 됩니다. 대신 왼쪽에서 오른쪽으로 각 숫자에 해당하는 가중치를 도입해야 합니다. 그러면 가중치를 기준으로 계산된 새 값과 원래 값이 비교에 사용됩니다. 이 문제는 formatFloat 메서드를 수정하여 수정하면 됩니다.
JS 코드
this.formatFloat = function(s) { // TODO var i = parseFloat(s); return (isNaN(i)) ? 0 : i; };
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.