jquery_jquery를 기반으로 한 테이블 정렬
- WBOY원래의
- 2016-05-16 18:19:551085검색
많은 전문가들이 직접 해보고 싶어서 jquery용 특수 정렬 라이브러리도 작성했습니다.
물론 실행 속도는 정말 받아들일 수 없지만 천천히 개선하겠습니다.
참고: 다음은 코드의 일부입니다. 데모를 확인하세요.
문서가 로드된 후 'th'에 클릭 이벤트를 추가하세요.
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr( 'dataType');
클릭한 개체의 사용자 정의 속성 dataType을 찾습니다. 물론 이는 W3C 표준을 준수하지 않으며 ID나 클래스로 정의할 수도 있지만 이 점이 직관적이라고 생각합니다. Transitional 모드에서도 사용할 수 있습니다.
2.
var index=$('th').index(this)
문서에서 클릭한 개체의 위치를 찾습니다. 그리고 1을 추가합니다. 1을 추가하는 것은 클릭한 개체의 위치를 제공하는 것입니다. 이는 해당 열의 td에 스타일을 추가하여 수행됩니다.
:eq()를 사용하면 td의 전체 문서 위치만 가져올 수 있기 때문입니다. :nth-child()를 사용하면 자체 상위 요소에서 각 td를 가져올 수 있습니다.
3.
var row=$('tbody tr')
tbody의 모든 tr 을 변수 행에 저장합니다. .
4.
$.each(row, function(i){ arr[i]=row[i] })
모든 행을 탐색하여 arr 배열에 삽입합니다. >5.if($(this).hasClass('select')) {arr.reverse()}
이 'th'를 클릭하면 선택 스타일이 추가됩니다. 원래 arr 배열은 직접 반전됩니다.
else { <.>arr.sort(sortStr(index,dataType))
$('.select').removeClass(); :nth-child(' index ')').addClass(' select');
$(this).addClass('select')
}
그렇지 않으면 sort() 메서드를 사용하여 arr을 정렬하세요. sort() 메소드는 1개의 함수를 허용하며, 이 함수는 2개의 함수를 허용합니다. 여기서는 두 개의 매개변수가 있는
sortStr()
으로 정의합니다. >
코드 복사
코드는 다음과 같습니다.
function sortStr(index,dataType){ return function( a,b){ var aText=$(a).find(' td:nth-child(' index ')').text() var bText=$(b).find(' td:nth-child(' index ')').text();
if(dataType!='roomType'){ aText=Parse(aText,dataType)
bText=Parse (bText,dataType)
return aText>;;bText?-1:bText> ;aText?1:0
}
else return aText.localeCompare(bText)
}
첫 번째는 index 이며, 클릭 이벤트에서 얻은 변수입니다. 이 변수에는 문서에서 클릭된 '번째' 위치, 즉 숫자가 포함됩니다.
Jquert의 index() 메소드는 객체의 위치를 가져옵니다. 이 위치는 0부터 시작합니다. 이 예에는 6개의 '번째'가 있습니다.
두 번째 매개변수는 각 항목의 속성 값을 포함하는 dataType입니다. '일'.
sortStr()에는 비교 함수가 포함되어 있습니다. 이 함수에는 2개의 매개변수가 있습니다. 각 매개변수는 'tbody tr'을 나타냅니다. (여기서 a와 b는 비교해야 하는 tr을 나타냅니다.) 이 두 매개변수는 이를 포함하는 함수 환경에서 얻습니다. sort() 메서드의 매개변수는 함수입니다.
이 익명 함수는 작업 배열 Quote를 반환합니다. bText=Parse (bText,dataType)
return aText>;;bText?-1:bText> ;aText?1:0
}
else return aText.localeCompare(bText)
}
첫 번째는 index 이며, 클릭 이벤트에서 얻은 변수입니다. 이 변수에는 문서에서 클릭된 '번째' 위치, 즉 숫자가 포함됩니다.
Jquert의 index() 메소드는 객체의 위치를 가져옵니다. 이 위치는 0부터 시작합니다. 이 예에는 6개의 '번째'가 있습니다.
두 번째 매개변수는 각 항목의 속성 값을 포함하는 dataType입니다. '일'.
sortStr()에는 비교 함수가 포함되어 있습니다. 이 함수에는 2개의 매개변수가 있습니다. 각 매개변수는 'tbody tr'을 나타냅니다. (여기서 a와 b는 비교해야 하는 tr을 나타냅니다.) 이 두 매개변수는 이를 포함하는 함수 환경에서 얻습니다. sort() 메서드의 매개변수는 함수입니다.
arr에는 배열이 포함되어 있습니다. 각 배열의 값에는 tbody의 tr에 대한 참조가 포함되어 있습니다. 정렬 함수는 반환된 값에 따라 원래 배열의 요소 위치를 직접 변경합니다. $(a).find('td:nth-child(' index ')').text();
비교해야 하는 행의 td 중 하나에 포함된 텍스트를 가져옵니다.
클릭 이벤트에서 얻은 인덱스 변수가 매개변수가 되어 여기에 전달되어 th에 해당하는 td의 위치를 가져옵니다.
code
코드는 다음과 같습니다.
if(dataType!='roomType'){
aText=Parse(aText,dataType) bText =Parse(bText,dataType) return aText>;bText?-1:bText>;aText?1:0; } 정렬해야 하는 유형이 숫자와 문자를 포함하지 않음(roomType 값이 있기 때문에 요소에 숫자와 문자가 포함됨), 변환을 위해 획득한 td의 텍스트 값과 dataType을
Parse()에 전달, 코드 복사
function Parse(data,dataType){
switch(dataType){ case 'num': returnparseFloat(data)||0 case 'date': return Date.parse(data)||0 default: return SplitStr(data)
} }
숫자 유형을 부동 소수점 숫자로 직접 변환하는 경우
parseFloat(data)||0을 반환합니다.
Boone의 변환 개체 문자열이 나타나면 이 문서에 A NaN이 포함되어 있으므로 0을 반환합니다. 변환할 수 없으므로 0이 반환됩니다.
날짜 유형인 경우 Date.parse를 사용하여 직접 숫자로 변환할 수 있습니다. 이 변환은 변환 매개변수의 시간인
이것은 초 단위로 정확할 수 있는 시간 변환을 시도했습니다. 예를 들어 1971/01/2 18:12:20, 01/2/1970 18:12:20은
그런 다음
로 변환할 수 있습니다.
return aText>;bText?-1:bText>;aText?1:0;
aText가 bText보다 큰 비교 값을 반환합니다. 0보다 작은 숫자를 반환합니다. 반대로 양수를 반환합니다. 둘 다 해당되지 않으면 0을 반환합니다. ; 날짜도 숫자도 아닌 경우(현재 이 문서에서는 3가지 유형의 데이터만 변환할 수 있습니다: 1. 날짜. 2. 숫자. 3. 문자열과 숫자 함께),
기본값:
return SplitStr(data )
변환을 위해 SplitStr()에 넣었습니다
splitStr()의 내용은 다음과 같습니다.
function SplitStr(data){
var re=/^[$a-zA -zu4e00-u9fa5 ]*(.*?)[a-zA -zu4e00-u9fa5 ]*$/
data=data.replace(re,'$1')
parseFloat(data) 반환
}
정규식: 세 부분으로 나누어 1부분^[a-zA-Z]*; 중간 부분(.*?) 끝 부분 [a-zA-Z]*$
이렇게 볼 수 있습니다/ /컨테이닝 블록입니다.
첫 번째 ^ 부분은 대상 문자열의 시작을 의미하고, []는 대소문자에 관계없이 A~Z를 무시하고 공백이 있음을 의미합니다. * 왼쪽에 있는 [] 안의 내용은 여러 번 나타날 수 있음을 의미합니다.
중간 부분()은 그룹이며, 그룹화된 내용은 RegExp '$1', '.'의 첫 번째 항목에 배치됩니다. 모두 일치(공백 제외) *?
마지막 부분 []은 다음과 동일합니다. * 첫 번째 부분은 모두 제거되고, $는 일치하는 $ 기호를 나타냅니다. 🎜>
코드 시작 부분의 새 날짜와 끝 부분의 새 날짜는 테이블 정렬 시간으로 계산되며, 이 시간은 'span'에 표시됩니다. 가운데 'th' 표시는 정렬 시작부터 정렬 종료까지 전체 테이블 정렬에 걸리는 시간을 테스트하기 위한 것입니다.
전체 코드:
숫자 유형을 부동 소수점 숫자로 직접 변환하는 경우
parseFloat(data)||0을 반환합니다.
Boone의 변환 개체 문자열이 나타나면 이 문서에 A NaN이 포함되어 있으므로 0을 반환합니다. 변환할 수 없으므로 0이 반환됩니다.
날짜 유형인 경우 Date.parse를 사용하여 직접 숫자로 변환할 수 있습니다. 이 변환은 변환 매개변수의 시간인
이것은 초 단위로 정확할 수 있는 시간 변환을 시도했습니다. 예를 들어 1971/01/2 18:12:20, 01/2/1970 18:12:20은
그런 다음
로 변환할 수 있습니다.
return aText>;bText?-1:bText>;aText?1:0;
aText가 bText보다 큰 비교 값을 반환합니다. 0보다 작은 숫자를 반환합니다. 반대로 양수를 반환합니다. 둘 다 해당되지 않으면 0을 반환합니다. ; 날짜도 숫자도 아닌 경우(현재 이 문서에서는 3가지 유형의 데이터만 변환할 수 있습니다: 1. 날짜. 2. 숫자. 3. 문자열과 숫자 함께),
기본값:
return SplitStr(data )
변환을 위해 SplitStr()에 넣었습니다
splitStr()의 내용은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
function SplitStr(data){
var re=/^[$a-zA -zu4e00-u9fa5 ]*(.*?)[a-zA -zu4e00-u9fa5 ]*$/
data=data.replace(re,'$1')
parseFloat(data) 반환
}
정규식: 세 부분으로 나누어 1부분^[a-zA-Z]*; 중간 부분(.*?) 끝 부분 [a-zA-Z]*$
이렇게 볼 수 있습니다/ /컨테이닝 블록입니다.
첫 번째 ^ 부분은 대상 문자열의 시작을 의미하고, []는 대소문자에 관계없이 A~Z를 무시하고 공백이 있음을 의미합니다. * 왼쪽에 있는 [] 안의 내용은 여러 번 나타날 수 있음을 의미합니다.
중간 부분()은 그룹이며, 그룹화된 내용은 RegExp '$1', '.'의 첫 번째 항목에 배치됩니다. 모두 일치(공백 제외) *?
마지막 부분 []은 다음과 동일합니다. * 첫 번째 부분은 모두 제거되고, $는 일치하는 $ 기호를 나타냅니다. 🎜>
코드 복사 코드는 다음과 같습니다.
function sortStr(index,dataType){ return function(a,b){
var aText=$(a).find('td:nth-child(' index ')' ).text()
var bText=$(b ).find('td:nth-child(' index ')').text();
if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText =Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;
}
else return aText.localeCompare(bText)
}
}
그렇지 않으면 비교를 위해 localeCompare를 직접 사용하십시오. 이는 다음과 같이 문자열을 비교하는 특별한 방법입니다. 문자열 'a' 반환된 문자열 'b'보다 앞에 순위가 매겨집니다. 숫자는 여전히 0보다 큰 숫자, 음수 및 0입니다.
var aText=$(a).find('td:nth-child(' index ')' ).text()
var bText=$(b ).find('td:nth-child(' index ')').text();
if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText =Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;
}
else return aText.localeCompare(bText)
}
}
그렇지 않으면 비교를 위해 localeCompare를 직접 사용하십시오. 이는 다음과 같이 문자열을 비교하는 특별한 방법입니다. 문자열 'a' 반환된 문자열 'b'보다 앞에 순위가 매겨집니다. 숫자는 여전히 0보다 큰 숫자, 음수 및 0입니다.
코드 시작 부분의 새 날짜와 끝 부분의 새 날짜는 테이블 정렬 시간으로 계산되며, 이 시간은 'span'에 표시됩니다. 가운데 'th' 표시는 정렬 시작부터 정렬 종료까지 전체 테이블 정렬에 걸리는 시간을 테스트하기 위한 것입니다.
전체 코드:
코드 복사 코드는 다음과 같습니다.
<머리>
表格排序
返回文章
<머리>
返回文章
| 房号 | 日期 | 房间类型 | 床位 | 容量 | 价格/晚 | 合计 |
|---|---|---|---|---|---|---|
| u0628 | 9/14/2008 | Std Hotel Room 2 Double (27 left) | 2 | 4 人 | $109.00 | $436.00 |
| u0631 | 10/4/2008 | Lodge Rm/Shared Bath Q (4 left) | 1 | 2 人 | $109.00 | $436.00 |
| u0636 | 9/18/2008 | Std Hotel Room Q (34 left) | 1 | 2 人 | $117.00 | $466.00 |
| u0638 | 9/19/2008 | Std Hotel Room 2 Q (28 left) | 2 | 4 人 | $117.00 | $466.00 |
| u0612 | 9/1/2008 | Studio Condo (10 left) | 1 | 4 人 | $149.00 | $596.00 |
| u0626 | 9/13/2008 | Hotel Jr Suite K (4 left) | 1 | 2 人 | $149.00 | $596.00 |
| u0641 | 9/22/2008 | Hotel Superior K (26 left) | 1 | 2 人 | $149.00 | $596.00 |
| u0602 | 8/31/2008 | 1 Bdrm Condo K (96 left) | 1 | 4 人 | $169.00 | $676.00 |
| u0616 | 10/8/2008 | Studio Condo Murphy (5 left) | NaN | 4 人 | $169.00 | $676.00 |
| u0623 | 10/2/2008 | Studio Cabin Q (6 left) | 1 | 2 人 | $169.00 | $676.00 |
| u0633 | 9/16/2008 | Studio Q/Murphy (6 left) | 2 | 4 人 | $169.00 | $676.00 |
| u0637 | 10/5/2008 | Lodge Room Q (4 left) | 1 | 2 人 | $169.00 | $676.00 |
| u0622 | 9/11/2008 | Hotel Loft Ste K/Q (3 left) | 2 | 4 人 | $179.00 | $716.00 |
| u0629 | 10/10/2008 | 1 Bdrm Condo K (76 left) | 1 | 4 人 | $179.00 | $716.00 |
| u0603 | 9/8/2008 | Hotel Loft K/Q (16 left) | 2 | 4 人 | $189.00 | $756.00 |
| u0632 | 9/15/2008 | Hotel Loft K/2T (15 left) | 3 | 4 人 | $189.00 | $756.00 |
| u0619 | 10/1/2008 | Studio Cabin Firepl K (6 left) | 1 | 2 人 | $209.00 | $836.00 |
| u0608 | 10/7/2008 | 1 Bdrm Condo with Den K (1 left) | 1 | 6 人 | $222.00 | $886.00 |
| u0620 | 9/5/2008 | 2 Bdrm Condo K/K (25 left) | 2 | 6 人 | $229.00 | $916.00 |
| u0630 | 9/7/2008 | 2 Bdrm Condo K/2T (57 left) | 3 | 6 人 | $229.00 | $916.00 |
| u0634 | 10/11/2008 | 2 Bdrm Condo K/Q (88 left) | 2 | 6 人 | $229.00 | $916.00 |
| u0639 | 9/20/2008 | 1 Bdrm K/Murphy (19 left) | 2 | 4 人 | $229.00 | $916.00 |
| u0614 | 9/2/2008 | 2 Bdrm Townhome (7 left) | 2 | 4 人 | $239.00 | $956.00 |
| u0610 | 9/10/2008 | 1 Bdrm Loft K/Q+2T/Murphy (5 left) | 5 | 8 人 | $269.00 | $1076.00 |
| u0625 | 9/12/2008 | 2 Bdrm K/Q/Murphy (6 left) | 3 | 6 人 | $269.00 | $1076.00 |
| u0640 | 9/21/2008 | Exec. 2 Bdrm K/2Q/Murphy (2 left) | 4 | 8 人 | $269.00 | $1076.00 |
| u0606 | 9/26/2008 | 2 Bdrm Cabin K/Q+T (2 left) | 3 | 5 人 | $279.00 | $1116.00 |
| u0613 | 9/29/2008 | Lodge 2 Bdrm Suite Q/Q (1 left) | 2 | 4 人 | $279.00 | $1116.00 |
| u0624 | 10/3/2008 | 1 Bdrm Cabin Firepl K (3 left) | 1 | 4 人 | $279.00 | $1116.00 |
| u0618 | 9/4/2008 | 2 Bdrm Condo w/Den Custom (1 left) | 2 | 6 人 | $329.00 | $1316.00 |
| u0627 | 10/9/2008 | 3 Bdrm Condo K/Q/Q (6 left) | 3 | 8 人 | $339.00 | $1356.00 |
| u0642 | 9/23/2008 | 2 Bdrm Cabin Firepl K/Q+T (1 left) | 3 | 7 人 | $339.00 | $1356.00 |
| u0615 | 9/3/2008 | 3 Bdrm Condo K/Q/2T (2 left) | 4 | 8 人 | $379.00 | $1516.00 |
| u0607 | 9/9/2008 | 2 Bdrm. Loft K/Q/Q,3T/SS (9 left) | 6 | 11 人 | $389.00 | $1556.00 |
| u0609 | 9/27/2008 | Dlx 1 Bdrm Cabin Firepl K (3개 남음) | 1 | 4인 | $389.00 | $1556.00 |
| u0635 | 2008년 9월 17일 | Exec 2 Bdrm Lft K/K/2Q/SS (1개 남음) | 4 | 10인 | $399.00 | $1596.00 |
| u0621 | 2008년 9월 6일 | 3베드룸 타운홈(3개 남음) | 3 | 6인 | $409.00 | $1636.00 |
| u0601 | 2008년 9월 24일 | 3베드룸 캐빈 K/Q T/2T(1개 남음) | 5 | 9인 | $469.00 | $1876.00 |
| u0605 | 2008년 9월 25일 | Dlx 1Bd Loft,K,Q/T Firepl (1 남음) | 3 | 6인 | $469.00 | $1876.00 |
| u0611 | 2008년 9월 28일 | Dlx 2 Bdm Cbn Firepl K/2T (3개 남음) | 2 | 6인 | $469.00 | $1876.00 |
| u0604 | 2008년 10월 6일 | 디럭스 3베드룸 콘도 K/Q/Q(남은 2개) | 3 | 8인 | $499.00 | $1996.00 |
| u0617 | 2008년 9월 30일 | Dlx3Bdm/2Bth/FP/K/QT/QT(1개 남음) | 5 | 8인 | $549.00 | $2196.00 |