JavaScript 다중 데이터 유형 테이블 정렬 코드 분석

한자정렬,
한영혼합정렬,
데이터크기정렬,
파일형식정렬(접미사명정렬)
날짜 및 시간정렬,
가격정렬,
한문혼합 숫자 정렬 ;
사용법: 문서가 로드된 후 새로운 tableListSort(인수,인수).

은 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 필수이며 문자열 ID이거나 테이블 객체일 수 있습니다. 두 번째 선택적 매개변수는 객체인 {data:index,fileType :index,fn:function(){}입니다. }; 객체에는 세 가지 선택적 속성이 있는데 첫 번째와 두 번째는 확장 정렬의 데이터 유형이고 세 번째 매개변수는 테이블 데이터가 필요한 데이터 크기가 있는 경우 실행해야 하는 함수입니다. 1KB 1MB 1GB와 같이 정렬된 경우 {data:index}를 사용할 수 있습니다. 인덱스는 정렬해야 하는 테이블 열의 아래 첨자 값이며 0부터 계산됩니다. 예를 들어 테이블의 두 번째 열은 1KB 데이터입니다. MB, {data:2}와 같은 유형, {fileType:index} 객체의 두 번째 속성, 이 확장자는 xml, jpg, exe 및 기타 접미사 이름과 같은 파일 유형으로 정렬됩니다. 인덱스는 열의 아래 첨자 값이기도 합니다.

객체의 세 번째 선택적 속성은 정렬 후 실행해야 하는 함수 {fn:function(){실행 코드}}입니다.

HTML 코드에 필요한 요소는 다음과 같습니다. table 요소의 첫 번째 줄은 tr을 포함하는 thead 요소를 사용해야 하며, tr은 thead의 다음 형제 요소인 클릭 가능한 정렬 요소를 포함해야 합니다. tbody가 되려면 tbody에 tr이 포함되어야 합니다. 정렬된 데이터는 td를 사용하여 포함되며, 테이블에는 캡션과 tfoot도 포함될 수 있습니다.

4월 11일 업데이트: 정렬 후 오름차순, 내림차순을 나타내는 아이콘이 추가되었습니다.
클래스 추가 사용자 정의 이 속성을 추가할 계획이 없다면 설정하지 않은 상태로 둘 수 있습니다. 마우스 스타일 mymickey가 스크립트에 추가되며 CSS를 추가할 필요가 없습니다.
table.Index는 마지막으로 정렬된 좌표값이고, table.Index는 null로 초기화됩니다.
fn: fn:fini 함수는 정렬 후에도 실행해야 하는 함수입니다. 여기에 하나를 전달하세요. 정렬 후 실행해야 하는 기능은 아래로 정렬 및 위로 정렬 아이콘을 추가하는 것입니다.

다음 소스 코드:

코드 복사 코드는 다음과 같습니다:

 
window.onload=function(){ 
function fini(num){ 
table. th[num].className= 
table .th[num].className=='selectUp'? 
'selectDown':'selectUp';//아이콘 전환 

각(table. Row,function(o){//highLight 현재 정렬된 열을 밝게 합니다. 
o.cells[num].className='highLight' 
if(table.Index!=null&&table.Index!=num){ 
o.cells[table.Index] .className=''; 
} 
}) 
if(table.Index!=null&&table.Index!=num){//기타 클릭한 원본이 취소되었습니다. icon 
table .th[table.Index].className=''; 
} 
} 

var table=new tableListSort($('tb'),{data:8, fileType:9,fn :fini})//문서가 로드된 후 새 매개변수가 전달됩니다. 
} 

코드 복사 코드는 다음과 같습니다.

 
var Class={ 
create:function(){ 
return function(){ 
this.init.apply(this,arguments) 
} 
} 
} 
각 함수(o,fn){ 
for(var j=0,len=o.length;jfn(o[j],j) 
} 
} 

Function.prototype.bind=function(){ 
var method=this; 
var args=Array.prototype.slice.call(인수); 
var object=args.shift(); 
return function(){ 
return method.apply(object,args.concat(Array.prototype.slice.call(arguments))) 
} 
} 
function $(elem, elem2){ 
var arr=[]; 
typeof elem=='string' ?arr.push(document.getElementById(elem)):arr.push(elem); 
elem2&&arr.push(arr[0].getElementsByTagName(elem2)); 
(arr.length>1)&&(typeof elem=='object') &&(arr.shift()); 
return arr.length!=2?arr[0]:arr[1]; 
} 

var tableListSort=Class.create() 
tableListSort.prototype={ 
init:function(tables,options){ 
this.table=$(tables); //找到table元素 
this.th=$($(this.table,'thead')[0],'th');//找到th元素 
this.tbody=$(this.table ,'tbody')[0];//找到tbody元素 
this.Row=$(this.tbody,'tr'); //找到tr元素 
this.rowArr=[];//tr塞入这个数组 
this.Index=null; 
this.options=options||{}; 
this.finish=this.options.fn||function(){}; 
this.dataIndex=Math.abs(this.options.data)||null;//提供比较数据类型的坐标。
this.file=Math.abs(this.options.fileType)||null;//비교해야 할 파일 형식 좌표 제공
each(this.Row,function(o){this.rowArr .push(o )}.bind(this));//tr 객체 목록을 배열에 로드 
for(var i=0;this.th.length>i;i){ 
this.th [i].onclick=this.Sort.bind(this,i)//바인딩을 사용하여 아래 첨자 값(변수)을 간접적으로 유지하고 
this.th[i].style.cursor='pointer'에 전달합니다. ; 
} 
this.re=/([-]{0,1}[0-9.]{1,})/g;//정규식 대체
this.dataIndex&&subData(this. Row,this .dataIndex,this.Row.length); 
}, 

Sort:function(num){ 
//var date1=new Date().getTime()//Test 정렬 시간을 테스트하고 싶다면 댓글로 삭제해주세요
//다른 클릭한 원본 취소 아이콘
(this.Index!=null&&this.Index!=num)&&this.th[this. Index].setAttribute('sorted',''); 
this.th[num].getAttribute('sorted')!='ed' 
this.rowArr.sort(this.naturalSort.bind( this,num )):this.rowArr.reverse();//현재 개체를 클릭한 경우 reverse()에 해당하는 열을 사용하여 순서를 직접 뒤집고, 그렇지 않으면 미리 정의된 sort()를 사용하므로 정렬합니다. 메소드를 사용하므로 정렬을 수행하는 함수가 
//정렬해야 하는 열의 첨자 값을 알고 싶다면, 바인딩()에서 num을 전달하고 이를 호출합니다. 
var frag=document.createDocumentFragment; ();//문서 조각 만들기
each(this.rowArr,function(o){frag.appendChild(o)});//정렬된 배열을 문서 조각에 삽입
this.tbody.appendChild( frag);//조각 노드 삽입
this.th[num].setAttribute('sorted','ed') 
//$('spans').innerHTML=(new Date(). getTime())-date1;/ /Testing은 정렬 시간을 테스트하는 데 사용됩니다. 정렬 시간을 테스트하려면 
this.finish(num);//정렬 후 실행되는 함수
를 댓글로 삭제하세요. Index=num;//정렬된 좌표 값
}, 
naturalSort:function (num,a, b) { 
//데이터가 정렬되었는지 확인합니다. 
 속성을 ​​찾습니다. var a=this.dataIndex!=num?a.cells[ num].innerHTML:a.cells[num].getAttribute('data'), 
b=this.dataIndex!=num?b.cells[num ].innerHTML:b.cells[num].getAttribute(' data'); 
//num은 바인드 메소드에 의해 전달됩니다. 정렬해야 하는 셀의 내용을 찾습니다. 
var x = a. toString().toLowerCase() || '', y = b. toString().toLowerCase() || '', 
nC = String.fromCharCode(0), 
xN = x.replace(this .re, nC '$1' nC).split(nC),/ / 문자열을 배열로 분할 
yN = y.replace(this.re, nC '$1' nC).split(nC), 
xD = (new Date(x)).getTime(), yD = (new Date(y)).getTime() 
xN = this.file!=num?xN:xN.reverse(),// 파일 형식이 있으면 순서를 바꿉니다. 
yN = this.file!= num?yN:yN.reverse() 

if ( xD && yD && xD < yD ) 
return -1 ; 
else if ( xD && yD && xD > yD ) 
return 1 
 for ( var cLoc=0, numS = Math.max( xN.length, yN.length ); cLoc < numS; cLoc ) 
if ( (parseFloat( xN[cLoc] ) | | true 
return -1; 
else if ( (parseFloat( xN[cLoc] ) || xN[cLoc] ) > ( parseFloat( yN[cLoc] ) || yN[cLoc] ) ) 
 return 1; 
return 0; 
} 

} 
function subData(o,i,len ){//데이터 크기 정렬이 있는 경우 데이터에 td에 사용자 정의 속성을 추가합니다./ /Regular도 판단할 수 있습니다//mymickey가 여기에 Regular를 쓰지 않았습니다
for(var j=0;len>j;j) { 
if(o[j].cells[i].innerHTML.substring (o[j].cells[i].innerHTML.lastIndexOf('KB')).toLowerCase()=='kb'){ 
o[j].cells[i].setAttribute('data', parsFloat(o[j].cells[i].innerHTML)*1024) 
} 
if(o[j] .cells[i].innerHTML.substring(o[j].cells[i] .innerHTML.lastIndexOf('MB')).toLowerCase()=='mb'){ 
o[j].cells[ i].setAttribute('data',parseFloat(o[j].cells[i ].innerHTML)*1000000) 
} 
else if(o[j].cells[i].innerHTML.substring (o[j].cells[i].innerHTML.lastIndexOf('GB') ).toLowerCase()=='gb'){ 
o[j].cells[i].setAttribute('data', parseFloat(o[j].cells[i].innerHTML)*1000000000); 
} 
} 
} 

 

코드 복사 코드는 다음과 같습니다:

table#tb {

text-align:center 
border:1px #ccc solid; 
테두리 축소:접기 
글꼴 크기:12px 
글꼴 -가족:Arial, Helvetica, sans-serif 
색상:#666>폭:900px; >배경:url(room-bg.gif) 0 -13px 반복-x ; 
} 
table#tb td { 
border-bottom:#ccc 1px solid 
padding:.3em 0 .3em 0; 
} 

#tb 번째 { 
 높이:30px 
색상:#009; 
padding-right:16px; tb thead tr{ 

} 

#tb td.highLight {color:#000;} 
#tb th.selectUp { 
 background:url(up1.png) no -반복 오른쪽 가운데 투명 ; { 
글꼴-가중치:굵게; 
색상:#06F; 
배경:url(room-bg.gif) 0 -13px 반복-x 


패키지 다운로드
http://www.jb51.net/jiaoben/32017.html

JavaScript 다중 데이터 유형 테이블 정렬 코드 분석_javascript 기술