对Table进行排序 (可指定排序方式)

在日常的WEB开发中，对表格的排序经常会用到，于是在网上找了些资料，然后自己下来研究了下，做了一些整理，现在将他贴出来，一来备忘，二来可以帮助其他需要的人。

 

需要注意的地方：

关于table中按行按列排序的方法：
1. 取出每一行作为排序的单元，结果即为完整的正确的排序。
2. 每一行中有一个关键字用于排序的标准
2.1 每一个关键字都有类型的区别，如string, int, date, float等类型
3. IE和Firefox中，元素中内容的存储形式有一定的区别
4. 数组有已有的排序接口，[无参数形式和有参数形式]
4.1 无参数形式的排序，按第一个字母的顺序进行，第一个字母相同者比较
第二个字母，以此类推
4.2 有参数形式的排序，通过实现一个排序函数，每次取出两个tr进行排序
5. 如果连续点击同一个th，则表示要对当前的列进行升序和降序操作。
6. 列中的数据类型不同，则排序方式有所差别，如同是数字，按string和Int排序
则可能出现不同的结果。

排序过程中使用了,createDocumentFragment()函数，如果使用document
.createElement(),由于需要多次遍历DOM树，如果表格很大的话，会造成一定
的性能问题，所以采取createDocumentFragment(),将片段创建在内存中，最后
通过查找tbody节点，完成插入操作。

 

下面是一个截图

 好了，代码如下，没有使用第三方的库，可能效果上比较粗糙，但是逻辑功能已经实现，你可以自己设计一些比较漂亮的CSS重新进行“界面化”。

 

判断浏览器类型，并作出相应的返回动作：

/**
 * @param obj the object to judge
 * @return the content of the object.
 */    
function IEorFF(obj){
	if(obj.textContent != null){//IE
		return obj.textContent;
	}else{//FF
		var s = obj.innerText;
		return s.substring(0,s.length);	
	}	
}

 做具体的排序动作：

/**
 * @param tid the id of table element
 * @param col which col to sort
 * @param type the datatype of the selected col.
 * @return null	
 */
function sortTable(tid, col, type){
	var table = document.getElementById(tid);//get the table element
	var tbody = table.tBodies[0];//get the tbody array.
	var colrows = tbody.rows;//get all rows in colrows.
	var trs = new Array;//new a array to store the rows.
	
	for(var i = 0;i < colrows.length-1; i++){//store all rows in array trs.
		trs[i] = colrows[i+1];	
	}
	
	if(table.sortcol == col){//if the selected col is current col, then reverse it.
		trs.reverse();	
	}else{//else sort it.
		trs.sort(compare(col, type));//sort and save the result in the trs array.
	}
	var frag = document.createDocumentFragment();//new a element to store the result.
	
	for(var i = 0;i < trs.length; i++){//fullfill the element with sorted array.
		frag.appendChild(trs[i]);	
	}
	tbody.appendChild(frag);//add the array to tbody.
	
	table.sortcol = col;//set the sortcol to col.	
}

 其中用到了一个外部函数：

compare(value, type)

相当于java中的comparable接口，需要实现自己的排序方式，代码如下：

/**
 * @param col the special col to compare
 * @param type data type of the special col
 * @return 
 *         1 : gt 
 *         0 : eq 
 *        -1 : lt
 */     
function compare(col, type){
	return function(arg1, arg2){
		var v1 = convert(IEorFF(arg1.cells[col]), type);
		var v2 = convert(IEorFF(arg2.cells[col]), type);
		if(v1 > v2){
			return 1;//>
		}else if(v1 < v2){
			return -1;//<	
		}else{
			return 0;//==	
		}
	};	
}

 而这个函数又调用了一个转化器，转换器可以根据不同的类型返回可排序的串：

/**
 * @param value the org value in string type
 * @param type data type of the org value.
 * @return the correct type of the special value.
 */
function convert(value, type){
	switch(type){//convert the value to correct type
		case 'int'://integer
			return parseInt(value);
		case 'float'://float
			return parseFloat(value);
		case 'date'://date
			return new Date(Date.parse(value));
		default://other, admit to be string.
			return value.toString();
	}	
}

 好了，代码就这么点，由于公司要求，所以注释是英文的，我也懒得改了。看看怎么使用吧，

只需要在table/th里加入对点击时间的监听就可以了：

onclick="changeimg(this);sortTable('toSort', 0, 'int')"