JavaScript 정렬 테이블 sorting_javascript 기술
- WBOY원래의
- 2016-05-16 18:42:511168검색
1. JavaScript의 Sort 메소드를 실제로 이해하고 있습니까?
2. JavaScript의 localeCompare 메소드의 함수 본문을 알고 계시나요?
3. 테이블 정렬 방법에 필요한 매개변수는 무엇인가요?
JavaScript의 sort 메소드는 하나씩 판단하는 루프를 작성할 필요 없이 직접 정렬 기능을 제공합니다. 그러나 메커니즘은 여전히 동일합니다.
코드 복사 코드는 다음과 같습니다.
창 .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()
alert(MyArr.toString())
위와 같은 상황이 발생합니다. 그렇다면 정수를 정렬하려면 어떻게 해야 합니까? 변환은 아주 간단하지만 Float, Date 등이 있다면 어떨까요? 다 똑같습니다. 변환 함수만 작성하면 됩니다. 당신이 말한 것은 반드시 이루어져야 합니다.
코드 복사 코드는 다음과 같습니다.
function Convert(DataValue,DataType){
switch(DataType){
case "int":
returnparseInt(DataValue);
case "float":
returnparseFloat(DataValue)
case "date":
return new Date(Date.parse(DataValue));
기본값:
return DataValue.toString();
}
}
매우 간단한 변환 메소드가 나왔습니다. Date 객체이기 때문에, 기본 타입과 다르며, 매번 새로운 객체가 생성되므로 주의하시기 바랍니다. switch(DataType){
case "int":
returnparseInt(DataValue);
case "float":
returnparseFloat(DataValue)
case "date":
return new Date(Date.parse(DataValue));
기본값:
return DataValue.toString();
}
}
Sort 메소드에는 sortfunction이라는 매개변수가 있을 수 있습니다.
먼저 간단한 정렬 메소드를 살펴보겠습니다
코드 복사 코드는 다음과 같습니다.
function Compare_function(value1,value2){
if(value1return -1
else if(value1>value2)
return 1;
else
return 0;
}
사실 localeCompare 함수도 이와 비슷합니다. value1이 value2보다 작으면 -1이 반환됩니다. 즉, value1if(value1
else if(value1>value2)
return 1;
else
return 0;
}
마지막으로 각 열의 데이터가 반드시 문자열일 필요는 없으므로 데이터 유형 매개변수, 즉 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];
}
MyArr.sort(CustomCompare(Col, DataType));
//문서 조각을 생성하고 여기에 모든 행을 추가합니다. 이는 임시 저장소 랙과 같습니다. 목적은 (document.body에 직접 추가하면 행이 한 번 삽입되고 새로 고쳐집니다.) .데이터가 너무 많으면 사용자 경험에 영향을 미칩니다.)
//먼저 임시 선반에 모든 행을 넣은 다음 임시 선반에 있는 행을 document.body에 추가하여 테이블이 한 번만 새로 고침하세요.
//가게에서 쇼핑할 때처럼 먼저 사고 싶은 물건(행)을 모두 목록(문서 조각)에 적고 슈퍼마켓에서 하나만 생각하지 않고 다 사요. 그러면
var frag=document.createDocumentFragment();
for(var i=0;ifrag.appendChild(MyArr[i]); 배열의 모든 행을 문서 조각으로
}
DBody.appendChild(frag);//문서 조각의 모든 줄을 본문에 추가
이 방법으로 정렬이 완료되면 Sort 메서드의 매개 변수로 사용자 정의된 정렬 메서드인 CustomCompare 함수가 있습니다. 이 함수에는 두 개의 매개 변수가 있는데, 하나는 정렬된 열이고 다른 하나는 데이터입니다. 유형.
함수 본문은
반환 함수 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; ;
};
물론 클로저 덕분에 이런 형태로 쓸 수 있게 되었습니다. 정렬 방법에서는 배열의 각 항목(각 항목은 테이블의 각 행을 저장함)을 반복하고 매개변수를 CompareTRs(TR1,TR2)에 전달한 다음 결과를 반환합니다.
사실 이것도 괜찮은데, 사진을 정렬하고 싶다면 어떻게 해야 할까요?어떤 종류의 사진인가요? 잘 모르겠으니 사진 제목이나 alt 속성을 사용해 보세요. 항상 문자열이 될 수 있습니다. 사용자 정의 속성 customvalue를 제공하고 해당 값을 기준으로 정렬합니다.
을 구현하여 이 속성이 포함되어 있는지 확인하는 경우 CompareTRs 메서드를 수정해야 합니다.
코드는 다음과 같습니다.MyArr[i]=DataRows[i]; 마지막으로 정렬된 열 sum 판단
if(DBody.CurrentCol==Col){
MyArr.reverse() //배열 반전
}
else{
MyArr.sort(CustomCompare (Col,DataType));
}
//문서 조각을 만들고 여기에 모든 줄을 추가합니다. 이는 임시 저장소 선반과 같습니다. document.body에 직접 추가하면 한 행이 한 번 새로 고쳐집니다. 데이터가 너무 많으면 사용자 경험에 영향을 미칩니다.)
//먼저 모든 행을 임시 저장 선반에 넣은 다음 임시 저장소 선반의 행을 document.body에 추가하면 테이블만 한 번 새로 고쳐집니다.
//가게에서 쇼핑할 때처럼 먼저 사고 싶은 물건(행)을 모두 목록(문서 조각)에 적고 슈퍼마켓에서 하나만 생각하지 않고 다 사요. 그러면
var frag=document.createDocumentFragment();
for(var i=0;ifrag.appendChild(MyArr[i]); 배열의 모든 행을 문서 조각으로
}
DBody.appendChild(frag);//문서 조각의 모든 행을 본문에 추가
DBody.CurrentCol=Col; //현재 기록 정렬된 열
}
자바스크립트에서는 실수하기 쉽기 때문에 대문자 사용에 주의하세요.
위 코드는 성공적으로 테스트되었으며, 날짜 정렬 효과는 아래와 같습니다
모든 코드:
var DBody=DTable.tBodies[0];
var DataRows=DBody.rows;
var MyArr=new Array; 배열에
for (var i=0;i
}
MyArr.sort(CustomCompare(Col, DataType));
//문서 조각을 생성하고 여기에 모든 행을 추가합니다. 이는 임시 저장소 랙과 같습니다. 목적은 (document.body에 직접 추가하면 행이 한 번 삽입되고 새로 고쳐집니다.) .데이터가 너무 많으면 사용자 경험에 영향을 미칩니다.)
//먼저 임시 선반에 모든 행을 넣은 다음 임시 선반에 있는 행을 document.body에 추가하여 테이블이 한 번만 새로 고침하세요.
//가게에서 쇼핑할 때처럼 먼저 사고 싶은 물건(행)을 모두 목록(문서 조각)에 적고 슈퍼마켓에서 하나만 생각하지 않고 다 사요. 그러면
var frag=document.createDocumentFragment();
for(var i=0;i
}
DBody.appendChild(frag);//문서 조각의 모든 줄을 본문에 추가
이 방법으로 정렬이 완료되면 Sort 메서드의 매개 변수로 사용자 정의된 정렬 메서드인 CustomCompare 함수가 있습니다. 이 함수에는 두 개의 매개 변수가 있는데, 하나는 정렬된 열이고 다른 하나는 데이터입니다. 유형.
함수 본문은
코드 복사 코드는 다음과 같습니다.
반환 함수 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; ;
};
물론 클로저 덕분에 이런 형태로 쓸 수 있게 되었습니다. 정렬 방법에서는 배열의 각 항목(각 항목은 테이블의 각 행을 저장함)을 반복하고 매개변수를 CompareTRs(TR1,TR2)에 전달한 다음 결과를 반환합니다.
사실 이것도 괜찮은데, 사진을 정렬하고 싶다면 어떻게 해야 할까요?
을 구현하여 이 속성이 포함되어 있는지 확인하는 경우 CompareTRs 메서드를 수정해야 합니다.
코드 복사 코드는 다음과 같습니다. function CustomCompare(Col,DataType){
return 함수 CompareTRs(TR1,TR2){ var value1,value2;
//맞춤 값 속성이 있는지 확인
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 1; >};
}
사진 정렬도 해결되었습니다. 사용자가 여러 번 정렬하고 여러 번 클릭하고 싶다면 어떻게 해야 합니까? 여전히 CompareTRs 메서드를 수정해야 합니까?
분명히 필요하지는 않습니다. JavaScript에는 배열의 각 항목을 반전시킬 수 있는 reverse() 메서드가 있습니다. SortTable 메서드 수정은 다음과 같으면 됩니다.
코드 복사 //맞춤 값 속성이 있는지 확인
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 1; >};
}
사진 정렬도 해결되었습니다. 사용자가 여러 번 정렬하고 여러 번 클릭하고 싶다면 어떻게 해야 합니까? 여전히 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;iif(DBody.CurrentCol==Col){
MyArr.reverse() //배열 반전
}
else{
MyArr.sort(CustomCompare (Col,DataType));
}
//문서 조각을 만들고 여기에 모든 줄을 추가합니다. 이는 임시 저장소 선반과 같습니다. document.body에 직접 추가하면 한 행이 한 번 새로 고쳐집니다. 데이터가 너무 많으면 사용자 경험에 영향을 미칩니다.)
//먼저 모든 행을 임시 저장 선반에 넣은 다음 임시 저장소 선반의 행을 document.body에 추가하면 테이블만 한 번 새로 고쳐집니다.
//가게에서 쇼핑할 때처럼 먼저 사고 싶은 물건(행)을 모두 목록(문서 조각)에 적고 슈퍼마켓에서 하나만 생각하지 않고 다 사요. 그러면
var frag=document.createDocumentFragment();
for(var i=0;i
}
DBody.appendChild(frag);//문서 조각의 모든 행을 본문에 추가
DBody.CurrentCol=Col; //현재 기록 정렬된 열
}
자바스크립트에서는 실수하기 쉽기 때문에 대문자 사용에 주의하세요.
위 코드는 성공적으로 테스트되었으며, 날짜 정렬 효과는 아래와 같습니다
모든 코드:
코드 복사
코드는 다음과 같습니다.<본문>
图文排序  | 整数排序 | 浮点数排序 | 字符串排序 | 日期排序 |
 | 2 | 5.4 | zd | 2009-10-31 14:33:13 |
 | 267 | 8.9 | xx | 2002-10-31 14:36:13 |
 | 6 | 60.4 | ty | 2009-10-31 19:33:13 |
 | 9 | 0.8 | lp; | 2004-5-31 14:33:13 |
| | 34 | 9.4 | cv | 1009-10-31 14:33:13 |
| | 289 | 23.4 | uio | 2005-10-31 14:33:13 |
| | 45 | 89.4 | cb | 1039-10-31 14:33:13 |
| | 2 | 5.4 | zd | 2009-10-31 14:33:13 |
| | 42 | 9.3 | bm | 1069-10-31 14:34:14 |