潔靜精微

这里的代码是根据《JavaScript高级程序设计》第12章里面的示例重新整合的，关于Array的sort的用法可以看下《JavaScript高级程序设计》第12章，也可以看下《JavaScript sort()方法》。

下面是详细代码和注释：

/**
 * 表格排序
 */
var sortTable = {
	/**
	 * 转换函数
	 * 可以将 String 类型的变量转成 Int,Float,Date 的格式
	 * @param {String} v 原来的值
	 * @param {String} tp 值类型 int,float,date,默认为 string
	 */
	convert:function(v,tp){

		switch(tp){
			case 'int':
				return parseInt(v);
			case 'float':
				return parseFloat(v);
			case "date":
				// IE6 只认 yyyy/mm/dd hh:mm:ss的格式
				return new Date(Date.parse(v.replace(/\-/g,'/')));
			default:
				return v.toString().toLowerCase();
		}
	},

	/**
	 * 对比两个行
	 * @requires sortTable.convert
	 * @param {Int} ic 排序要参照的表格序号
	 * @param {String} dt 值类型 int,float,date,默认为 string
	 */
	compareTrs:function(ic,dt){

		/**
		 * 返回一个新的对比函数
		 * @requires sortTable.convert
		 * @param {Object} r1 第一行
		 * @param {Object} r2 第二行
		 */
		return function(r1,r2){
			var v1 , v2;
			// 如果节点拥有 data-sort 属性
			// 则根据 data-sort 属性进行排序
			if(r1.cells[ic].getAttribute('data-sort')){
				v1 = sortTable.convert(r1.cells[ic].getAttribute('data-sort'),dt);
				v2 = sortTable.convert(r2.cells[ic].getAttribute('data-sort'),dt);
			}else{
				// 如果节点没有 data-sort 属性
				// 则根据节点的 nodeValue 值进行排序
				v1 = sortTable.convert(r1.cells[ic].firstChild.nodeValue,dt);
				v2 = sortTable.convert(r2.cells[ic].firstChild.nodeValue,dt);
			}
			// 默认降序排列
			if(v1 > v2){
				return -1;
			}else if(v1 < v2){
				return 1;
			}else{
				return 0;
			}

		};
	},

	/**
	 * 表格排序函数
	 * 这个表格要有 thead 和 tbody
	 * @requires sortTable.compareTrs
	 * @param {String} tid 要排序的表格 ID
	 * @param {Int} ic 排序要参照的表格序号
	 * @param {String} tp 值类型 int,float,date,默认为 string
	 */
	sortTr:function(tid,ic,dt){
		var tb = document.getElementById(tid), // 获得表格 table
		bd = tb.tBodies[0], // 获得表格的tbody
		trs = bd.rows, // 获得表格 tbody 下的行集合
		arr = [], // 用于存储 tr 行集合的列表
		i=l=trs.length, // 获得 tr 行集合的个数
		fg = document.createDocumentFragment(), // 临时片断
		st=tb.getAttribute('data-sort');

		// 将 tr 行存储到 arr 中
		while(i--){
			arr[i] = trs[i];
		}
		// st 可能为 0 或者 NaN
		if(st!=null && (parseInt(st)==ic)){
			// 如果表格当前的排序号和 ic 相等
			// 表明已经按照这个属性排序过了
			// 反排序就可以了
			arr.reverse();
		}else{
			arr.sort(sortTable.compareTrs(ic,dt));
			tb.setAttribute('data-sort',ic);
		}

		for(i=0;i<l;i++){
			fg.appendChild(arr[i]);
		}

		bd.appendChild(fg);

		tb.setAttribute('data-sort',ic);

		tb = bd = trs = arr = i = l = fg = null;

	}
};

继续阅读 →