자체 작성 테이블 정렬 js 플러그인 공유(효율적이고 간결함)_javascript 기술

예를 들면 jQuery의 테이블 정렬 플러그인(사용하기 너무 번거롭다거나 구체적인 사용법을 몰라서 사용하지 않았습니다), 원래의 js 테이블 정렬 플러그인 등이 있습니다. 비교해봤습니다. 원래의 js 테이블 정렬 플러그인을 사용하고, 이를 기반으로 일부 수정을 가한 결과, 일부에서는 사용하기가 다소 꺼려지거나 불편했지만, 마침내 당시에 필요한 기능을 구현했습니다. 이틀 전 원본 테이블에 일부 수정 작업을 수행했습니다. 행 사이에 색상을 변경하는 기능을 추가했는데 문제가 나타났습니다. 검사 및 분석 후에 효과가 혼란스러웠고 문제는 테이블 정렬 플러그인 코드에 있습니다. other 원본 코드는 이해하기 어렵습니다. 수정하려면 새로운 테이블 정렬 플러그인을 작성하는 것이 좋습니다.

원하는 대로 작성하세요. 테이블 정렬은 실제로 매우 간단합니다. 모든 정렬 열의 값을 꺼내서 배열에 저장하면 됩니다. (그리고 각 열에 해당하는 행 개체도 배열에 저장됩니다.) ), 열 값을 정렬합니다. 배열을 정렬합니다(행 개체의 배열도 정렬합니다). 테이블 정렬 플러그인 코드는 아래와 같습니다.

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

/**
* @description 테이블 정렬 구현
* @author 블로그:http://www.cnblogs.com/know/
* @date 2011-10-28
**/
(function () {
//초기화 구성 개체
var _initConfig = null;
var _tableObj = null, _tbodyObj = null, _tBodyIndex = 0;
//각 현재 정렬 모드에서 (정렬된) 행 배열을 저장하는 개체 - 이 변수는 IsLazyMode=true
var _trJqObjArray_Obj = null
/**
*/ Function_GetOnValueArray (Trjqobjarr, TDIndex, TD_VALATTR, TD_DATTYPE) {
VAR TDORDERVALR = 새 배열 () dval; _tbodyObj.find ("TR" ).each(function (i, trItem)
trObj = $(trItem);
trJqObjArr.push(trObj);
tdObj = trObj.find("td")[tdIndex]
tdObj); tdVal = td_valAttr ? tdObj.attr(td_valAttr) : tdObj.text();
tdVal = _GetValue(tdVal, td_dataType)
tdOrderValArr.push(tdVal)}); OrderValArr ;
}
/**
* 정렬 방식 추가 방법(rule)
* @private
* @param trJqObjArr: (외부 입력) 정렬된 행을 저장할 배열, tdIndex: 정렬 열 인덱스, td_valAttr: 정렬 열 가져오기 Value 속성, td_dataType: 정렬 열의 값 유형
**/
function _GetJqObjById(id) {
return "string" == typeof (id) ? $("#" id) );
};
/**
* jQuery 객체를 반환하는 메서드
* @private
**/
function _Sort(tdIndex, options) {
var trJqObjArr = null; !_trJqObjArray_Obj && (_trJqObjArray_Obj = {});
trJqObjArr = _trJqObjArray_Obj[tdIndex];
}
var isExist_trJqObjArr = true
if (!trJqObjArr) {
isExist_trJqObjArr = 거짓 trJqObjArr = new Array();
var tdOrderValArr = _GetOrderTdValueArray(trJqObjArr, tdIndex, options.ValAttr, options.DataType);
var sort_len = tdOrderValArr.length - 1; = options.Desc ? ">" : "for (var i = 0; i isExchanged = false
for (var j = sort_len; j > i; j--) {
if (eval(tdOrderValArr[j] CompareOper tdOrderValArr[j - 1])) {
_ExchangeArray(tdOrderValArr, j ); 배열의 행 객체
_ExchangeArray(trJqObjArr, j);
isExchanged = true;
}
}
//1회 비교 후가 아니면 교환 시 루프를 종료합니다.
if ( !isExchanged)
break
}
_initConfig.IsLazyMode && (_trJqObjArray_Obj[tdIndex] = trJqObjArr)
}
if (trJqObjArr) {
if (options.Toggle) {
_initConfig.IsLazyMode && isExist_trJqObjArr && trJqObjArr.reverse();
options.Desc = !options.Desc;
}
_ShowTable(trJqObjArr); /**
* 정렬 방법
* @private
* @param tdIndex: 정렬 열의 인덱스, 옵션: 정렬 열의 규칙 구성 개체
**/
function _ShowTable(trJqObjArr) {
_tbodyObj.html("")
for (var n = 0, len = trJqObjArr.length; n _tbodyObj.append(trJqObjArr[n]);
$.isFunction(_initConfig.OnShow) && (_initConfig.OnShow(n, trJqObjArr[n], _tbodyObj ))
}
}
/**
* 정렬된 테이블 표시
* @private
* @param trJqObjArr: tr 객체의 정렬된 배열
**/
function _ExchangeArray(array, j) {
var temp = array[j]
array[j ] = array[j - 1]
array[j - 1] = temp;
}
/**
* 배열의 항목을 교환하는 방법
* @private
* @param array: array, j: 교환 배열 항목의 tail 항목 인덱스
**/
function _GetValue(tdVal, td_dataType) {
스위치(td_dataType) {
case " int":
return parsInt(tdVal) || 0;
case "float":
return parsFloat(tdVal) || 0;
case " date":
return Date.parse (tdVal) || 0;
case "string":
기본값:
return tdVal.toString() || ""
}
/**
* 정렬 방식 추가 방법(rule)
* @private
* @param tdVal : 정렬 컬럼의 값, td_dataType : 정렬 컬럼의 값 타입
**/
function _SetOrder(obj, index, options) {
var orderSettings = {
ValAttr: false, //정렬 열의 Value 속성, 기본값 For: innerText
DataType: "string" , //정렬 열의 값 유형(사용 가능한 값: int|float|date|string)
OnClick: null, //정렬(클릭) 시 트리거되는 메서드
Desc: true, //(여부 내림차순) 정렬 방법, 기본값은 내림차순
Toggle: true, //정렬 방법 전환
DefaultOrder: false //기본 정렬 방법인지 여부
}
$ ; .extend(orderSettings, options);
orderSettings.DataType = orderSettings.DataType.toLowerCase();
obj = _GetJqObjById(obj);
//정렬을 트리거하는 이벤트 바인딩
obj.bind ("클릭", 함수 () {
_Sort(index, orderSettings);
$.isFunction(orderSettings.OnClick) && orderSettings.OnClick();
}); _Sort(색인, 순서설정)
}
var _api = {
Init: function (obj, tBodyIndex, options) {
if (obj == null || typeof (obj) == undefine) {
alert("TableOrder 초기화 매개변수 비어 있거나 잘못되었습니다! ");
return;
}
_tableObj = _GetJqObjById(obj);
_tBodyIndex = tBodyIndex || 0;
_tbodyObj = _tableObj.find("tbody: eq( " _tBodyIndex ")");
options = options || {};
_initConfig = {
IsLazyMode: true, //lazy 모드인지 여부에 관계없이 기본값은 true
OnShow: null //정렬 후 테이블을 표시하는 방법, params: trIndex, trJqObj, tbodyObj
};
$.extend(_initConfig, options)
_trJqObjArray_Obj =
},
SetOrder; : function (obj, index, options) {
if (_tableObj == null) {
alert("_tableObj가 아직 초기화되지 않았습니다!")
return; (obj, index, options);
}
};
window.TableOrderOper =
})()


🎜>

코드 복사 코드는 다음과 같습니다. 이름 / 유형

> ;
< ;td width="50" align="center">size 🎜>

/td>




< ;td align="center" _order="2008/3/6 20:12:23">2008/3/6 20:12:23

업로드 시간
2008/9/12 8:51:09	433247
AJAX	11394
EXT	2008/10/4 20:21:54	351
색인	2008/10/4 20:24:11	14074
ORDER	2008/10/4 20:24:11	2844

코드에 주석을 최대한 명확하게 작성하려고 최선을 다했습니다. 추가해야 할 사항은 다음과 같습니다.

1.js는 클로저를 사용하므로 코드는 간결하고 쉬워야 한다는 점을 강조합니다. 최대한 이해하도록.

2. IsLazyMode 속성 설정인 IsLazyMode=true는 정렬할 현재 테이블에 적용 가능하며 변경되지 않습니다. 즉, 행을 추가, 삭제 및 변경하는 Ajax 작업이 없으며 다음을 수행할 수 있습니다. 이점: 정렬할 열의 해당 행 개체를 한 번만 순회하고, 정렬된 행 개체 배열을 전역 개체에 저장하고, 다음 번 정렬 시 tdIndex를 통해 해당 행 개체 배열을 직접 검색하세요. (정렬 열의 인덱스) 및 배열을 반전하면 정렬 효과를 얻을 수 있어 코드 실행 효율성(성능)을 어느 정도 향상시킬 수 있습니다. IsLazyMode=false는 현재 정렬할 테이블이 다음과 같은 상황에 적합합니다. 행 추가, 삭제, 변경과 같은 ajax 작업과 같은 변경.

3. 일반적으로 정렬할 테이블 데이터의 양이 크지 않으며, 배열 정렬은 버블 정렬 알고리즘을 사용한다는 점을 고려하세요.

4.OnShow: null //정렬된 테이블을 표시하는 방법, params: trIndex, trJqObj, tbodyObj - 정렬된 테이블의 줄 바꿈 스타일 등을 설정하는 데 편리하게 사용할 수 있으며 성능도 향상됩니다. 최적화 고려 사항.

자, 마지막으로 플러그인 js와 데모를 첨부합니다. 현재 구현은 현재 프로젝트의 요구 사항을 매우 잘 충족하거나 대부분의 시나리오에 적합하다고 말할 수 있습니다. 아니면 안 좋은 일이라도 지나가던 친구들이 편하게 댓글을 남겨서 서로 소통하고 배울 수 있었으면 좋겠어요!

OrderTable.rar

원본 주소 : cnblogs 알아요