sortTable组件

 

#sortTable.js

 

 

/*
	说明：
	1. 该组件用于将一个普通的table，变成一个可以排序的table，同时可以添加奇数偶数行的样式(支持自定义)
	2. JSLogger.js 是一个记录日志的组件，不用的话，可以将类似JSLogger的代码全部删掉，不会影响当前组件。
	3. 兼容：IE7 8 9,FF,chorme
*/


//缓存table数据的对象
//使用table的ID作为属性进行访问
var tableMap = {};


/**
* 更新table的方法
* 更新后支持：奇偶样式（），表头排序
*@param tableId 表的ID
*@param config 配置信息
*	- widths	各个列的宽度数组 默认[200,200]
*	- oldEven	奇偶样式数据，默认["old","even"]\
*   - sortType	排序类型：txt文本，int数值类型 默认都是文本排序
**/
function updateTable(tableId,config){
	config = config ||{};
	config.widths = config.widths ||[200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200];//默认200px宽度
	config.sortType = config.sortType || ["txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt"];
	config.oldEven = config.oldEven ||["sort_old","sort_even"];//默认奇偶样式
	var tableObj = document.getElementById(tableId);
	if(tableObj==null){return;}
	
	//是否需要缓存数据：如果没有缓存数据，则进行如下操作
	if(!!tableMap[tableId]==false){
		var rows = tableObj.rows;
		var len  = rows.length;
		for(var i=1;i<len;i++){
			var row = rows[i];			
			if(i%2==0){
				row.className = config.oldEven[0];
				row.classNameOld = config.oldEven[0];
			}else{
				row.className = config.oldEven[1];
				row.classNameOld = config.oldEven[1];
			}
		}


		JSLogger.log("缓存table");
		//tableObj.className="sortTable";
		tableObj.setAttribute("cellpadding","0");
		tableObj.setAttribute("cellspacing","0");
		tableObj.setAttribute("border","0");

		var tempArr = [];
		for(var i=0;i<len;i++){
			var row = rows[i];
			var rowArr = [];
			if(i>0){//第一行不拷贝
				var cells = row.cells;
				for(var k=0;k<cells.length;k++){
					rowArr.push(cells[k].innerHTML);//只保存td的html
				}
				tempArr.push(rowArr);
			}
		}
		tableMap[tableId] = tempArr;
		JSLogger.log(tempArr,true);

		
		//给table的head添加时间监听
		JSLogger.log("给table的head添加事件监听");
		var head  = rows[0];
		var cells = head.cells;
		for(var j=0;j<cells.length;j++){
			var cell = cells[j];
			//添加排序图标
			var sortSpan = document.createElement("SPAN");
			sortSpan.className = "sort_asc_def";
			sortSpan.setAttribute("name","sortSpan");			
			sortSpan.setAttribute("sortType",config.sortType[j]);
			sortSpan.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;";
			sortSpan.setAttribute("tableId",tableId);//存储表ID
			sortSpan.setAttribute("colIndex",j);//存储列索引
			sortSpan.setAttribute("sort","desc");//存储排序顺序
			cell.appendChild(sortSpan);

			cell.className="sort_head";
			if(config.widths){
				cell.style.width = (config.widths[j]+"px" || "");
			}
			//排序图标添加click点击事件：兼容IE\FF\Chrome
			if(window.attachEvent){
				sortSpan.attachEvent("onclick",function (sortSpan,config) {  
					return function (){  
						sortTable(sortSpan,config);  
					}  
				}(sortSpan,config));
				//表头不可以选中
				cell.attachEvent("onselectstart",function (cell) {  
					return function (){  
						return false;  
					}  
				}(cell));
			}else{//FF ,chrome
				sortSpan.addEventListener("click",function (sortSpan,config) {  
					return function (){  
						sortTable(sortSpan,config);  
					}  
				}(sortSpan,config),false);
				//表头不可以选中：在css样式中实现
			}
		}
	}
	
}
/*排序的方法
*@param tdDom 当前TD对象
*@param config 配置信息(详细说明见updateTable方法)
*
*/
function sortTable(tdDom,config){
	//JSLogger.log("tdDom.tableId  = "+tdDom.getAttribute("tableId") +",tdDom.colIndex = "+tdDom.getAttribute("colIndex"));//+",innerHTML = "+tdDom.innerHTML);
	JSLogger.log("sort = "+tdDom.getAttribute("sort")+",sortType = "+tdDom.getAttribute("sortType"));
	var tableId = tdDom.getAttribute("tableId");
	var sort = tdDom.getAttribute("sort");
	var colIndex = tdDom.getAttribute("colIndex");
	var table = document.getElementById(tableId);
	var sortType = tdDom.getAttribute("sortType");//txt文字排序/int数值排序
	//var rows = [];
	//除第一样以外，全部删除
	while(table.rows[1]){  
		//rows.push(table.rows[1]);
		table.deleteRow(1);  
	}   
	setTimeout(function(){
		//从缓存中获取原始table的所有行
		var rowsData = tableMap[tableId];
		var colLen = rowsData[0].length;
		var JSON  ={colIndex:colIndex,sort:sort,sortType:sortType};
		rowsData = sortRows(rowsData,JSON);//;
		//JSLogger.log(rowsData[0][0]);
		for(var i=0;i<rowsData.length;i++){
			var row = table.insertRow(-1); 
			//奇偶样式
			if(i%2==1){
				row.className = config.oldEven[0];
				row.setAttribute("classNameOld",config.oldEven[0]);
			}else{
				row.className =  config.oldEven[1];
				row.setAttribute("classNameOld",config.oldEven[1]);
			}
			
			//注入td内容
			for(var j=0;j<colLen;j++){
				var cell = row.insertCell(-1); 
				cell.innerHTML = rowsData[i][j];
			}
		}
	},0);
	//重置所有排序图标 :name="sortSpan"
	var spanArr = document.getElementsByTagName("span");
	for(var k=0;k<spanArr.length;k++){
		var span = spanArr[k];
		if("sortSpan"==span.getAttribute("name") && "sort_desc"==span.className){
			span.className = "sort_desc_dis";
		}else if("sortSpan"==span.getAttribute("name") && "sort_asc"==span.className){
			span.className = "sort_asc_dis";
		}
	}
	//最后重置排序
	if("desc"==sort){
		tdDom.setAttribute("sort","asc");
		tdDom.className = "sort_desc";
	}else{
		tdDom.setAttribute("sort","desc");
		tdDom.className = "sort_asc";
	}
	
}

/*
*自定义数组排序方法
*@param rows 一个table的所有行的数据
*@param JSON 参数
*	-colInex 列索引 按照那个列进行排序
*	-sort 正序还是反序 asc/desc
*	-sortType 	txt文本排序/int 数值排序
*/
function sortRows(rows,JSON){
	var colIndex = JSON.colIndex;
	var sort = JSON.sort;
	var sortType = JSON.sortType;

	//JSLogger.log(rows,true);
	JSLogger.log("colIndex = "+colIndex+",sort = "+sort+",sortType = "+sortType);
	rows = rows.sort(function(row1,row2){
		if("txt"==sortType){//文本排序
			if("asc"==sort){
				if((row1[colIndex]>row2[colIndex])===true){return 1;}
				else if(( row1[colIndex]<row2[colIndex])===true){return -1;}
				else{return 0;}
			}else{
				if((row1[colIndex]>row2[colIndex])===true){return -1;}
				else if(( row1[colIndex]<row2[colIndex])===true){return 1;}
				else{return 0;}
			}
		}else{//数值排序
			if("asc"==sort){
				return parseFloat(row1[colIndex])- parseFloat(row2[colIndex]);
			}else{
				return -(parseFloat(row1[colIndex])- parseFloat(row2[colIndex]));
			}
		}
	});
	return rows;
}

 

 

附件是完整代码和实例。

 

欢迎指正

 

 

 

 

 

 

 

 

 

 

 

愤怒的jser -  好东西就要共享