Auntion-TableSortjavascript类文件_javascript技巧

/* 
* 表格名不能为空,可为已获取的对象或名字 
* 表头名默认为：tag 
* 通过自行编写接口可实现不同的触发排序方式 
* 
* 作者:Auntion 
* E-mail:Auntion@Gmail.com 
* OICQ:82874972 
* 
* 日期:2007年04月22日 - 测试 - 待修正 
*/ 
var tableSort= function(element,tagName,upStyle,downStyle){this.table= (typeof(element) == 'string') ? TAGDom.fromId(element) : element;this.td = this.table.getElementsByTagName("td"); this.hName= (tagName.length<1) ? "tag" : tagName;this.rows = this.table.rows;this.byUp = (upStyle == undefined) ? "DescUp" : upStyle ;this.byDown = (downStyle == undefined) ? "DescDown" : downStyle ;var totalTd = [];var totalNr = [];var totalTag= [];this.tempCellIndex; this.tempStatus = {};var setAllTag = function(){ for(var i = 0; i < this.td.length; i++){if(this.td[i].className === this.hName) totalTag.push(this.td[i]);}}.bind(this);var getStatus = function(tagName){this.tempStatus[tagName] = (this.tempStatus[tagName] == true) ? false : true;for(tags in this.tempStatus){if(tags == tagName) return this.tempStatus[tags];else delete this.tempStatus[tags];}}.bind(this);var changeShow = function(cellIn,status){for(var i=0; i<totalTag.length; i++){if(totalTag[i].cellIndex == cellIn){if(status == true) totalTag[i].className = this.byUp;else if(status == false) totalTag[i].className = this.byDown;}else{totalTag[i].className = this.hName;}}}.bind(this);var startSort = function(status){for (var i = totalNr[this.tempCellIndex].length - 1; i > 0; i--){for (var j = 0; j < i; ++j){if ( (status == true) ? totalNr[this.tempCellIndex][j] > totalNr[this.tempCellIndex][j + 1] : totalNr[this.tempCellIndex][j] < totalNr[this.tempCellIndex][j + 1] ){var temp = totalNr[this.tempCellIndex][j + 1];totalNr[this.tempCellIndex][j + 1] = totalNr[this.tempCellIndex][j];totalNr[this.tempCellIndex][j] = temp;for(var n=0; n<totalNr.length; n++){if(n != this.tempCellIndex){var temps = totalNr[n][j+1];totalNr[n][j + 1] = totalNr[n][j];totalNr[n][j] = temps;}}}}};InsertContect();}.bind(this);var InsertContect = function(){ for(var i=0; i<totalTd.length; i++){for(var j=0; j<totalTd[i].length; j++){totalTd[i][j].innerHTML = totalNr[i][j];}};totalTd.length = 0;totalNr.length = 0;};this.init = function(status){for(var i=0; i<(this.td.length/this.rows.length); i++){totalTd[i] = new Array();totalNr[i] = new Array();for(var j=0; j<this.rows.length; j++){if(this.rows[j].cells[i].className !== this.hName){totalTd[i][j-1] = this.rows[j].cells[i];if(IsNumber(this.rows[j].cells[i].innerHTML) == true){totalNr[i][j-1] = parseInt(this.rows[j].cells[i].innerHTML);}else{totalNr[i][j-1] = this.rows[j].cells[i].innerHTML;}}}}startSort(status);} 
/********************************************************************************************************************************/ 
/**通过点击标签触发排序事件**/ 
 //public: 通过默认鼠标事键触发 (interface example)(设置用户接口的范例) 
 this.toTagStart = function(){ 
 setAllTag(); //获取标签 
 for(var i=0; i<totalTag.length; i++){ 
 totalTag[i].sIndex = function(cIndex){ this.tempCellIndex=cIndex }.bind(this); //设置列index 
 totalTag[i].gStatus = function(values){ return getStatus(values) }; //获取与设置状态 
 totalTag[i].ceShow = function(i,s){ changeShow(i,s) }; //改变显示的东西 
 totalTag[i].stSort = function(status){ this.init(status) }.bind(this); //初始化 
 totalTag[i].onselectstart = function(){ return false }; //点击不选中文字 
 totalTag[i].onclick = function(){ 
 this.sIndex(this.cellIndex); 
 this.status = this.gStatus(this.firstChild.nodeValue); 
 this.ceShow(this.cellIndex,this.status); 
 this.stSort(this.status); 
 } 
 } 
 } 
}

/* 
* 
By Auntion 
QQ:82874972 
Blog:Auntion@blogbus.com 
Email:Auntion@Gmail.com 
请勿删除此部分注释.谢谢! 
ver date-2007-02-01 
* 
*/ 
var isIe = /msie/i.test(navigator.userAgent); 
var TAGDom = { 
 fromId: function(i){ 
 return document.getElementById(i); 
 }, 
 fromName: function(i){ 
 return document.getElementById(i); 
 }, 
 fromClass: function(className,baseId) { 
 this.fatherId = null; 
 if(!baseId){ 
 this.fatherId = document; 
 }else{ 
 this.fatherId = DOM.fromId(baseId); 
 } 
 var basic = fatherId.getElementsByTagName("*") || document.all; 
 var child = null; 
 var classNames = null; 
 var aggregate = []; 
 for (var i = 0; i < basic.length; i++) { 
 child = basic[i]; 
 classNames = child.className.split(" "); 
 for (var j = 0; j < classNames.length; j++) { 
 if (classNames[j] == className) { 
 aggregate.push(child); 
 break; 
 } 
 } 
 } 
 return aggregate; 
 } 
}; 
function externalStyle (element, target) { 
 this.setReturn; 
 if (element.currentStyle){ 
 this.setReturn = element.currentStyle[target]; 
 }else if (window.getComputedStyle){ 
 this.setReturn = getComputedStyle (element,"").getPropertyValue(target); 
 } 
 return this.setReturn; 
} 
String.prototype.toInt = function(){ 
 return parseInt(this.replace(/[a-zA-Z]+/,'')); 
} 
String.prototype.trim = function(){ 
 return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 
Function.prototype.bind = function(e) { 
 var source = this; 
 return function() { 
 return source.apply(e,arguments); 
 } 
} 
function IsNumber(_str){ 
 var tmp_str = _str.trim(); 
 var pattern = /^(- ?\+)?\d+(\d+)?$/; 
 return pattern.test(tmp_str); 
}

<html> 
<head> 
<title>Auntion - TableSort 测试交流</title> 
<style type="text/css"> 
#bodys{ 
 border-top:1px solid #0099FF; 
 border-left:1px solid #0099FF; 
} 
#bodys td { 
 border-bottom:1px solid #0099FF; 
 border-right:1px solid #0099FF; 
 font-size:12px; 
 height:22px; 
 line-height:22px; 
 text-align:left; 
 padding-left:10px; 
 background:#DFEFFF; 
 color:#666666; 
} 
#bodys td.tag { 
 background:#95D5FF; 
 color:#333333; 
 font-weight:900; 
 height:28px; 
 line-height:28px; 
 cursor:pointer; 
} 
#bodys td.DescUp { 
 background:#FFFFCC url("byUp.gif") no-repeat right 6px; 
 color:#333333; 
 font-weight:900; 
 height:28px; 
 line-height:28px; 
 cursor:pointer; 
} 
#bodys td.DescDown { 
 background:#FFFFCC url("byDown.gif") no-repeat right 6px; 
 color:#333333; 
 font-weight:900; 
 height:28px; 
 line-height:28px; 
 cursor:pointer; 
} 
</style> 
<script language="javascript" type="text/javascript" src="Language.ext.js"></script> 
<script language="javascript" type="text/javascript" src="tableSort.class.js"></script> 
</head> 
<body> 
<table border="0" cellspacing="0" cellpadding="0" id="bodys"> 
 <tr> 
 <td width="45" class="tag">选择</td> 
 <td width="50" class="tag">数字</td> 
 <td width="50" class="tag">字母</td> 
 <td width="80" class="tag">名字</td> 
 <td width="150" class="tag">地址</td> 
 <td width="80" class="tag">时间</td> 
 </tr> 
 <tr> 
 <td><input type="checkbox" checked></td> 
 <td>1</td> 
 <td>a</td> 
 <td>谢诗圆</td> 
 <td>http://www.gxlcms.com/;/td> 
 <td>2007-12-16</td> 
 </tr> 
 <tr> 
 <td><input type="checkbox" checked></td> 
 <td>4</td> 
 <td>c</td> 
 <td>auntion</td> 
 <td>http://www.gxlcms.com/;/td> 
 <td>2006-12-06</td> 
 </tr> 
 <tr> 
 <td><input type="checkbox"></td> 
 <td>3</td> 
 <td>b</td> 
 <td>疯狂的石头</td> 
 <td>http://www.gxlcms.com/;/td> 
 <td>2007-03-12</td> 
 </tr> 
 <tr> 
 <td><input type="checkbox"></td> 
 <td>3.2</td> 
 <td>d</td> 
 <td>谢某人</td> 
 <td>http://www.gxlcms.com/;/td> 
 <td>2000-01-01</td> 
 </tr> 
 <tr> 
 <td><input type="checkbox" checked></td> 
 <td>5</td> 
 <td>f</td> 
 <td>小小强</td> 
 <td>http://www.gxlcms.com/;/td> 
 <td>2008-12-31</td> 
 </tr> 
 <tr> 
 <td><input type="checkbox"></td> 
 <td>7</td> 
 <td>e</td> 
 <td>疯狂的man</td> 
 <td>http://www.gxlcms.com/;/td> 
 <td>2006-11-12</td> 
 </tr> 
 <tr> 
 <td><input type="checkbox"></td> 
 <td>71</td> 
 <td>g</td> 
 <td>小强</td> 
 <td>http://www.gxlcms.com/;/td> 
 <td>2002-08-23</td> 
 </tr> 
 <tr> 
 <td><input type="checkbox" checked></td> 
 <td>8</td> 
 <td>h</td> 
 <td>王庆</td> 
 <td>http://www.gxlcms.com/;/td> 
 <td>1999-08-25</td> 
 </tr> 
</table> 
<script language="javascript" type="text/javascript"> 
var apply = new tableSort("bodys","tag"); 
apply.toTagStart(); //这里将使用已经定义的一种默认触发方式. 
</script> 
</body> 
</html>