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

本文介绍了一种不依赖第三方库的表格排序方法,适用于常见的Web开发场景。该方法能够处理不同类型的排序需求,包括数字、字符串和日期等,并实现了浏览器兼容性处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在日常的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里加入对点击时间的监听就可以了:

οnclick="changeimg(this);sortTable('toSort', 0, 'int')"
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值