Maison > Article > interface Web > Auntion-TableSort javascript类文件_javascript技巧
Auntion-TableSort javascript类文件_javascript技巧
- PHP中文网original
- 2016-05-16 19:07:581130parcourir
tableSort.class.js
复制代码 代码如下:
/*
* 表格名不能为空,可为已获取的对象或名字
* 表头名默认为：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);
}
}
}
}
Language.ext.js
复制代码 代码如下:
/*
*
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);
}
使用实例_1.htm
复制代码 代码如下:
<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.php.cn/;/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.php.cn/;/td>
<td>2006-12-06</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>b</td>
<td>疯狂的石头</td>
<td>http://www.php.cn/;/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.php.cn/;/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.php.cn/;/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.php.cn/;/td>
<td>2006-11-12</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>71</td>
<td>g</td>
<td>小强</td>
<td>http://www.php.cn/;/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.php.cn/;/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> 以上就是Auntion-TableSort javascript类文件_javascript技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：用javascript实现旋转图片效果的代码_图象特效Article suivant：摘自百度的图片轮换效果代码_图象特效
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript