您的位置：首页 > Web前端 > JavaScript
js之排序表格

2012-11-01 18:19 288 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SortableTable</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="base.css">
<script type="text/javascript">
window.onload = function(){
var s = new SortableTable(document.getElementById('xxx'));
//s.sortByCol(1,1);
}

/**
该表格表格头放在thead里面，所有交互操作通过表格头实现
要排序的行放在tbody里面
*/

/**
就是通过表头点击事件操作所有的tbody里面的行，行的值为对应列单元格的值，
通过数组的排序实现，将排序好的列重新插入表格
*/
function SortableTable(table){
this.table = table;//排序的表格
this.headers = table.tHead.rows[0].cells;//表头每个单元格，按单元格的该列排序行
this.rows = this.table.tBodies[0].rows;//要排序的行,tbody可以不止有一个所以用tbodies
for(var i=0;i<this.headers.length;i++){
if(this.headers[i].className){//有className表示要按照该列排序
this.headers[i].currentOrder = 1;
var _this = this;
(function(i){
_this.headers[i].onclick = function(){
_this.sortByCol(i,this.currentOrder);
this.currentOrder = -this.currentOrder;
};
})(i);

}
}
}

SortableTable.prototype = {
sortByCol:function(colIndex,des){//colIndex:按照对应的列的值排序行
//des:1表示正序，-1表示逆序,默认1
des = des || 1;
var ay = [];

for(var i=0;i<this.rows.length;i++){
//alert(typeof getInnerText(this.rows[i].cells[colIndex]));
ay.push({
node:this.rows[i],
value:getInnerText(this.rows[i].cells[colIndex])
});
}
var _this = this;

ay.sort(function(a,b){//array定义了sort函数会自动排序
//a,b对应着数组中的元素
//规则和java的Comparator函子一样
var fn ;
switch(_this.headers[colIndex].getAttribute('valuetype')){
//对于不同类型，排序规则不一样，
//在thead对应的单元格用自定义的属性valuetype区分
//这里必须用标准函数，点运算符取属性值是取不出来的
case 'number':
fn = function(a,b){
var result;
if(+a.value>+b.value)
result = 1;
else if(+a.value<+b.value)
result = -1;
else
result = 0;

return result*des;
};
break;

case null://默认为string
fn = function(a,b){
//alert(a.value);
return a.value.localeCompare(b.value)*des;
}
break;
case 'date':
fn = function(a,b,fmt){
a = dateDecode(a.value,fmt);
b = dateDecode(b.value,fmt);
var result;
if(+a>+b)
result = 1;
else if(+a<+b)
result = -1;
else
result = 0;
return result*des;
};
break;

}

return fn(a,b,_this.headers[colIndex].getAttribute('param'));

});

//排序完了就插入到原始的tbody里面
var f = document.createDocumentFragment();
//var frag=document.createDocumentFragment();
for(var i=0;i<ay.length;i++){
f.appendChild(ay[i].node);
}

this.table.tBodies[0].appendChild(f);

}
}

function dateDecode(s,format){
//s：日期字符串
//format：日期字符串显示格式
//返回s对应的日期对象
format = format.split('');
var nums = s.match(/\d+/g);
var date = new Date();
for(var i=0;i<format.length;i++){
switch(format[i]){
case 'Y':
date.setFullYear(nums[i]);
break;
case 'm':
date.setMonth(nums[i]-1);
break;
case 'd':
date.setDate(nums[i]);
break;
case 'H':
date.setHours(nums[i]);
break;
case 'i':
date.setMinutes(nums[i]);
break;
case 's':
date.setSeconds(nums[i]);
break;
}
}
return date;
}

//得到某节点内部所有的文本
function getInnerText(node){
if(node.nodeType==3)//文本节点
return node.nodeValue.trim();
else if(node.nodeType==1){
var ret = '';
for(var i=0;i<node.childNodes.length;i++){
ret += getInnerText(node.childNodes[i]);
}
return ret;
}
}
//字符串去除开始和最后的空白节点
String.prototype.trim = function(){
return this.replace(/^\s+/,'').replace(/\s+$/,'');
};
</script>
</head>
<body>
<h1>SortableTable</h1>
<table class="sortableTable" border="1" id='xxx'>
<caption>成绩表</caption>
<thead>
<tr>
<th class="sortableCol">姓名</th>
<th class="sortableCol" valuetype="number">年龄</th>
<th>性别</th>
<th class="sortableCol" valuetype="number">Java</th>
<th class="sortableCol" valuetype="number">Python</th>
<th class="sortableCol" valuetype="number">Ruby</th>
<th class="sortableCol" valuetype="number">Linux Shell</th>
<th class="sortableCol" valuetype="number">VB.NET</th>
<th class="sortableCol" valuetype="number">总分</th>
<th class="sortableCol" valuetype="date" param="Ymd">日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>陈董</td>
<td>22</td>
<td>男</td>
<td>90</td>
<td>65</td>
<td>56</td>
<td>45</td>
<td>80</td>
<td>336</td>
<td>2009-10-10</td>
</tr>
<tr>
<td>王艳</td>
<td>26</td>
<td>女</td>
<td>95</td>
<td>70</td>
<td>56</td>
<td>55</td>
<td>80</td>
<td>356</td>
<td>2009-10-1</td>
</tr>
<tr>
<td>吴德华</td>
<td>19</td>
<td>女</td>
<td>60</td>
<td>60</td>
<td>56</td>
<td>40</td>
<td>60</td>
<td>276</td>
<td>2009-9-10</td>
</tr>
<tr>
<td>董城</td>
<td>24</td>
<td>男</td>
<td>80</td>
<td>75</td>
<td>66</td>
<td>65</td>
<td>80</td>
<td>366</td>
<td>2009-10-10</td>
</tr>
<tr>
<td>王俊</td>
<td>20</td>
<td>男</td>
<td>80</td>
<td>75</td>
<td>46</td>
<td>40</td>
<td>80</td>
<td>321</td>
<td>2009-10-16</td>
</tr>
<tr>
<td>陈聘</td>
<td>18</td>
<td>男</td>
<td>80</td>
<td>55</td>
<td>56</td>
<td>40</td>
<td>75</td>
<td>306</td>
<td>2009-8-11</td>
</tr>
<tr>
<td>吴奇</td>
<td>18</td>
<td>男</td>
<td>85</td>
<td>65</td>
<td>45</td>
<td>60</td>
<td>78</td>
<td>323</td>
<td>2009-8-10</td>
</tr>
</tbody>
</table>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航