테이블 sorting_js 객체지향을 구현한 실용적인 Javascript 클래스 라이브러리-JS 튜토리얼-php.cn

테이블 내용 정렬을 위한 Javascript 클래스 라이브러리입니다. 사용하기 매우 편리하며, 매번 데이터베이스를 호출할 필요가 없습니다.
다중 테이블 쿼리를 정렬하는 데 특히 적합합니다. 의 style.display 스위치를 추가하면 페이징도 구현할 수 있습니다.
효과 시연
사용법:
1. JS 추가
2.추가 TABLE은 ID가 있어야 하며 클래스는 "정렬 가능"합니다.

그렇습니다. 간단합니다.
느낌이 너무 단조롭습니다. 공식 CSS는 HEAD

/* 정렬 가능한 테이블을 변경하기 위한 CSS를 제공합니다. */
table.sortable a.sortheader {
background-color: #eee; #666666;
글꼴 두께:
텍스트 장식: 없음
디스플레이: 블록
}
table.sortable
색상: 검정색;
텍스트 장식: 없음
}

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

addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;

function sortables_init() {
    // 클래스가 정렬 가능한 모든 테이블을 찾아 make 정렬 가능
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for(ti=0;ti        thisTbl = tbls[ti];
        if (((' ' thisTbl.className ' ').indexOf("sortable") != -1) && (thisTbl.id)) {
            //initTable(thisTbl. id);
            ts_makeSortable(thisTbl);
        }
    }
}

함수 ts_makeSortable(table) {
    if (table.rows && table.rows.length > ;  0) {
        var firstRow = table.rows[0];
    }
    if (!firstRow) return;

    // 첫 번째 행이 있습니다. 헤더라고 가정합니다. 콘텐츠를 클릭할 수 있는 링크로 만듭니다
    for (var i=0;i        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell) ;
        cell.innerHTML = '        'onclick="ts_resortTable(this, ' i ');return false;">'   
        txt '   ';
    }
}

함수 ts_getInnerText(el) {
    if (typeof el == "string") return el;
    if (el 유형 == "정의되지 않음") { el 반환 };
    if (el.innerText) return el.innerText;    //필요하지는 않지만 더 빠릅니다
    var str ="";

    var cs = el.childNodes;
    var l = cs.length;
    for(var i = 0; i <  l;  i ) {
        스위치(cs[i].nodeType) {
           case 1: //ELEMENT_NODE
             str  = ts_getInnerText(cs[i]);
                휴식;
           사례 3:    //TEXT_NODE
               str  = cs[i].nodeValue;
              break;
        }
    }
    re Turn str;
}

ts_resortTable 함수 (lnk,clid) {
    // 범위 가져오기
    var span;
    for (var ci=0;ci        if (lnk.childNodes[ ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
    }
    var spantext = ts_getInnerText(span);
    var td = lnk.parentNode;
    var 열 = clid || td.cellIndex;
    var table = getParent(td,'TABLE');

    // 열의 유형을 계산합니다
    if(table.rows.length <= 1) return ;
    var itm = ts_getInnerText(table.rows[1].cells[column]);
    sortfn = ts_sort_caseinsensitive;
    if (itm.match(/^dd[/-]dd[/-] dddd$/)) sortfn = ts_sort_date;
    if (itm.match(/^dd[/-]dd[/-]dd$/)) sortfn = ts_sort_date;
    if (itm.match(/^ [?]/)) sortfn = ts_sort_currency;
    if (itm.match(/^[d.] $/)) sortfn = ts_sort_numeric;
    SORT_COLUMN_INDEX = column;
    var firstRow = new 배열() ;
    var newRows = new Array();
    for (i=0;i    for (j=1;j
    newRows.sort(sortfn);

    if (span.getAttribute("sortdir") == 'down') {
        화살표= '  ↑';
        newRows .reverse();
        span.setAttribute('sortdir','up');
    } else {
        화살표 = '  ↓';
        span.setAttribute('sortdir','down' );
    }

    // 이미 존재하는 하위 행을 tbody에 추가하므로 새 행을 생성하는 대신 이동합니다.
    // 하단 행 정렬을 수행하지 마세요
    (i =0;i    // 아래 행만 정렬
    for(i=0;i
    // 모든 항목 삭제 다른 화살표가 표시될 수 있습니다
    var allspans = document.getElementsByTagName("span");
    for(var ci=0;ci        if(allspans[ci]. className == 'sortarrow') {
           if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // 우리와 동일한 테이블에 있나요?
               allspans[ ci].innerHTML = '   ';
            }
        }
    }

    span.innerHTML = ARROW;
}

함수 getParent(el, pTagName) { 
    if (el == null) null 반환;
    else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())    // Gecko 버그, 대문자로 추정됨 
        return el;
    else
        return getParent(el.parentNode, pTagName);
}
함수 ts_sort_date(a,b) {
    // y2k 참고: 50 미만의 두 자리 연도는 20XX로 처리되고, 50보다 큰 연도는 19XX로 처리됩니다.
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX] );
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa.length == 10) {
        dt1 = aa.substr(6,4) aa.substr(3,2 ) aa.substr(0,2);
    } else {
        년 = aa.substr(6,2);
        if (parseInt(yr) < 50) { 년 = '20'년 ; } else { 년 = '19'년; }
        dt1 = 년 aa.substr(3,2) aa.substr(0,2);
    }
    if (bb.length == 10) {
        dt2 = bb.substr( 6,4) bb.substr(3,2) bb.substr(0,2);
    } else {
        yr = bb.substr(6,2);
        if (parseInt(yr) <  50) { 년 = '20'년; } else { 년 = '19'년; }
        dt2 = 년 bb.substr(3,2) bb.substr(0,2);
    }
    if (dt1==dt2) return 0;
    if (dt1    return 1;
}

function ts_sort_currency(a,b) { 
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0- 9.]/g,'');
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    return parseFloat(aa) - parseFloat(bb);
}

함수 ts_sort_numeric(a,b) { 
    aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
    if (isNaN(aa) )) aa = 0;
    bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); 
    if (isNaN(bb)) bb = 0;
    return aa-bb;
}

함수 ts_sort_caseinsensitive(a,b) {
    aa = ts_getInnerText(a.cells [SORT_COLUMN_INDEX]).toLowerCase();
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
    if (aa==bb) return 0;
    if (aa    return 1;
}

함수 ts_sort_default(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText( b.cells[SORT_COLUMN_INDEX]);
    if (aa==bb) return 0;
    if (aa    return 1;
}

 
addEvent(elm, evType, fn, useCapture) 함수
//addEvent 및removeEvent
//IE5, NS6 및 Mozilla에 대한 크로스 브라우저 이벤트 처리
//작성 Scott Andrew
{ 
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm. attachmentEvent("on" evType, fn);
    return r;
  } else {
    alert("처리기를 제거할 수 없음");
  }
} 

 