js 实现 table 行排序

js 实现 table 行排序

闲时无聊,参考网上一些资料,写了一个 SortTableTool.js 实现table行排序.
关键代码如下:

/** object
 *  example : sortTableT.sort('sortTable',0,'Number')
 * 
 **/
var sortTableT = new SortTableTool();
/** function
 *  SortTableTool
 */
function SortTableTool(){
	/** is sort all tBodies */
	this.isSortAlltBodies = false;
    /** is first descending sort by sortColumn */
	this.first_descending = false;
};
/** SortTableTool.sort
 *  tableId        : table.id
 *  sortColumn : cell's index of row
 *  nodeType    :  {'Number' ,'String' ,'Date' ,'NoCaseString'}
 */
SortTableTool.prototype.sort = function(tableId, sortColumn ,nodeType ,_first_descending) {
    var table = document.getElementById(tableId);
    var _tBodies_length = this.isSortAlltBodies ? table.tBodies.length : 1;
    
    var rowArray = new Array();
    var rowIndex = 0;
    for(var t=0 ; t< _tBodies_length ; t++){
		var tableBody = table.tBodies[t];
		var tableRows = tableBody.rows;
		for (var i = 0; i < tableRows.length; i++) {
	        rowArray[rowIndex++] = tableRows[i];
	    }
	}
	if( !isNULL(_first_descending) && ( _first_descending == true || _first_descending == false)){
		this.first_descending = _first_descending;
	}else{
		this.first_descending = false;
	}
    if (table.sortColumn == sortColumn) { 
        rowArray.reverse();
    } else {
        rowArray.sort(generateCompareTR(sortColumn, nodeType));
		if(this.first_descending){
			rowArray.reverse();
		}
    } 
	var tbodyFragment = document.createDocumentFragment();
    for (var i = 0; i < rowArray.length; i++) {
        tbodyFragment.appendChild(rowArray[i]);
    }
    tableBody.appendChild(tbodyFragment);
    table.sortColumn = sortColumn;
} 
/**
 * generateCompareTR
 * @return 
 */
var generateCompareTR = function(sortColumn, nodeType) {
    return function compareTR(trLeft, trRight) {
    	var left_firstChild = trLeft.cells[sortColumn].firstChild;
    	var right_firstChild = trRight.cells[sortColumn].firstChild;
        var leftValue = convertData(left_firstChild == null ? "" :left_firstChild.nodeValue, nodeType);
        var rightValue = convertData(right_firstChild == null ? "" :right_firstChild.nodeValue, nodeType);
        if (leftValue < rightValue) {
            return -1;
        }else if (leftValue > rightValue) {
        	return 1;
        }else{
        	return 0;
        }
    };
} 
/**function : convertData
 *  _value     : string value
 *  _dataType : {'Number' ,'String' ,'Date' ,'NoCaseString'}
 * @return
 */
var convertData = function(_value, _dataType) {
	var value = isNULL(_value) ? "" :  _value;
	var dataType = isNULL(_dataType) ? null : _dataType.toLowerCase();
	var v_result = null;
    switch (dataType) {
      case "number":
    	  v_result = new Number(value.trim().replace(/,/g,''));
    	  return isNaN(v_result) ? null : v_result ; 
      case "string":
    	  return value.toString();
	  case "nocasestring":
    	  return value.toString().toLowerCase();
      case "date":
    	  v_result = new Date(Date.parse(value.trim().trimNBSP().replace(/-/g,'/')));
    	  return isNaN(v_result) ? null : v_result;
      default:
    	  return value.toString();
    }  
}
/**
 * isNULL()
 * @return true or false
 */
var isNULL=function(v){
    return v == null || typeof(v) == 'undefined';
}
/**
 * String.prototype.trim()
 * @return
 */
String.prototype.trim=function(){
    return this.replace(/(^\s*)|(\s*$)/g, '');
}
String.prototype.ltrim=function(){
    return this.replace(/(^\s*)/g,'');
}
String.prototype.rtrim=function(){
    return this.replace(/(\s*$)/g,'');
}
/**
 * String.prototype.trimNBSP()
 * @return
 */
String.prototype.trimNBSP=function(){
    return this.replace(/^[\s\u3000\xA0]+|[\s\u3000\xA0]+$/g, '');
}
String.prototype.ltrimNBSP=function(){
    return this.replace(/^[\s\u3000\xA0]+/g,'');
}
String.prototype.rtrimNBSP=function(){
    return this.replace(/[\s\u3000\xA0]+$/g,'');
}
//------------------ over --------------------------

效果如下图:


测试多次,发现一个棘手的问题:
如果单元格中有   ,则 trim() 无法去除  (双字节空格).
尝试多次,终于找到解决办法.新加 trimNBSP() 方法可以去除  (双字节空格).

最后,附上源码.
源码中有 2 个demo示例页.

评论

8 楼 naomibyron 2014-12-25  

大神，受我一拜，我的表格各种数据类型都有，用'sortTable',2,'Number'，效果很好

7 楼 love_jun1314 2014-01-24  

请问楼主 如果第一列只显示input的value 不显示外面的值 直接按input的value进行排序  就会出问题 不知能否解决

6 楼 LinApex 2013-09-22  

刚好需要这个，可以跟 myPagination 结合起来。

5 楼 guokaiyouyou 2013-05-31  

对于汉字比较大小的判断是js是按什么规则比较的？

4 楼 cava_chen 2013-05-31  

还是挺不错的。可不不能进行数字的排序

3 楼 lily200825 2011-12-09  

jingzhoucc 写道

下载看了 ，赞一个

感谢 jingzhoucc 的评论.
总算有人认可我的辛苦劳动了.

2 楼 jingzhoucc 2011-12-09  

下载看了 ，赞一个

1 楼 lily200825 2011-12-08  

没人给点反应.
都爱潜水.
路过的,有想法的,留下跑路话.