首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript Sort 表格排序

Posted in Javascript onOctober 31, 2009

1.你真的懂JavaScript里面的Sort方法吗？
2.你知道JavaScript中 localeCompare 方法的函数体吗？
3.表格排序 方法 要哪些参数？

JavaScript中的sort方法直接就提供了排序的功能，不需要我们自己写个循环一个个的判断。但其机制仍然是那样的， 

window.onload=function(){ 
var MyArr=new Array("red","green","gray"); 
MyArr.sort(); 
alert(MyArr.toString()); 
}

输出的结果为 gray,green,red;那如果为整数呢？ 
window.onload=function(){ 
var MyArr=new Array(2,25,7); 
MyArr.sort(); 
alert(MyArr.toString()); 
}

如果你认为是 2，7，25 ；那么很高兴的说声 你错了，它的结果是 2，25，7，为什么呢？因为sort方法它是以字符串的ASCII来判断的，任何非字符串都将会先转换为字符串，
从而出现了上述情况。那我要对整数排序怎么办呢？转换呗，很简单，但是假如有 Float,Date，等等呢？都一样，写个转换函数不就得了。说了就得做。 
function convert(DataValue,DataType){ 
switch(DataType){ 
case "int": 
return parseInt(DataValue); 
case "float": 
return parseFloat(DataValue); 
case "date": 
return new Date(Date.parse(DataValue)); 
default: 
return DataValue.toString(); 
} 
}

一个很简单的转换方法就出来了，大家注意一下Date，因为它是对象，所以与基本类型不同，每次都会生成一个新的对象。
Sort 方法可以有个参数为sortfunction，
先看个简单的排序方法 
function compare_function(value1,value2){ 
if(value1<value2) 
return -1; 
else if(value1>value2) 
return 1; 
else 
return 0; 
}

其实 localeCompare 函数与其也差不多。当 value1小于value2时，返回-1，即顺序排列，将value1<value2，返回1，即逆时排序。
回到重点，要对表格排序，点击表格头部即可排序，那么必须要有一个方法，取之为SortTable,那要对表格的某一列排序，要具备哪些参数呢？首先要一个表格ID来确定哪个表格，其次要
确定要排序的是哪一列，最后每一列的数据不一定都是字符串，所以要一个数据类型的参数，也就是 SortTable(TableID,Col,DataType); 
var DTable=document.getElementById(TableID); 
var DBody=DTable.tBodies[0]; 
var DataRows=DBody.rows; 
var MyArr=new Array; 
//将所有的行放入数组 
for(var i=0;i<DataRows.length;i++){ 
MyArr[i]=DataRows[i]; 
} 
MyArr.sort(CustomCompare(Col,DataType)); 
//创建一个文档碎片，将所有的行都添加进去，相当于一个暂存架，目的是（如果直接加到document.body里面，会插入一行，就刷新一次，如果数据多了就会影响用户体验） 
//先将行全部放在暂存架里面，然后将暂存架里面的行 一起添加到document.body，这样表格只会刷新一次。 
//就像你去商店购物，要先将要买的物品（行）全部写在单子上（文档碎片），然后超市全部购买，而不会想到一样东西就去一次，那么 
var frag=document.createDocumentFragment(); 
for(var i=0;i<MyArr.length;i++){ 
frag.appendChild(MyArr[i]); //将数组里的行全部添加到文档碎片中 
} 
DBody.appendChild(frag);//将文档碎片中的行全部添加到 body中

这样就可以完成一个排序，那么其中有个 CustomCompare 函数，为自定义的一个排序方法来作为Sort方法的参数，它两个参数，一个为排序的列，一个为数据类型。
函数体为 
return function CompareTRs(TR1,TR2){ 
var value1,value2; 
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType); 
value2=convert(TR2.cells[Col].firstChild.nodeValue,DataType); 
if(value1 < value2) 
return -1; 
else if(value1 > value2) 
return 1; 
else 
return 0; 
};

当然，能写成这样的形式要拜闭包所赐。在sort方法中遍历数组中的每一项（每一项存储的都是table得每一行）并会将参数传入 CompareTRs(TR1,TR2)中，然后返回结果。
其实这样就OK，但是如果要对图片排序怎么办？
图片是什么类型的？不知道，那我们取巧一下，就用图片的标题，或者alt属性，它们总可以是字符串吧。给它们一个自定义属性 customvalue，然后一句它的值来排序。只是在实现的时候
要判断是否含有此属性，那么就要对CompareTRs方法修改了。 
function CustomCompare(Col,DataType){ 
return function CompareTRs(TR1,TR2){ 
var value1,value2; 
//判断是不是有customvalue这个属性 
if(TR1.cells[Col].getAttribute("customvalue")){ 
value1=convert(TR1.cells[Col].getAttribute("customvalue"),DataType); 
value2=convert(TR2.cells[Col].getAttribute("customvalue"),DataType); 
} 
else{ 
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType); 
value2=convert(TR2.cells[Col].firstChild.nodeValue,DataType); 
} 
if(value1 < value2) 
return -1; 
else if(value1 > value2) 
return 1; 
else 
return 0; 
}; 
}

对图片的排序也解决了。那如果用户要多次排序，点好几次呢？我们是不是还要修改CompareTRs方法呢？
很明显是不需要的，JavaScript中有个 reverse()方法可以将数组中的每项都倒过来。对SortTable方法的修改只需如此如此 
function SortTable(TableID,Col,DataType){ 
var DTable=document.getElementById(TableID); 
var DBody=DTable.tBodies[0]; 
var DataRows=DBody.rows; 
var MyArr=new Array; 
for(var i=0;i<DataRows.length;i++){ 
MyArr[i]=DataRows[i]; 
} 
//判断上次排序的列和这次是否为同一列 
if(DBody.CurrentCol==Col){ 
MyArr.reverse(); //将数组倒置 
} 
else{ 
MyArr.sort(CustomCompare(Col,DataType)); 
} 
//创建一个文档碎片，将所有的行都添加进去，相当于一个暂存架，目的是（如果直接加到document.body里面，会插入一行，就刷新一次，如果数据多了就会影响用户体验） 
//先将行全部放在暂存架里面，然后将暂存架里面的行 一起添加到document.body，这样表格只会刷新一次。 
//就像你去商店购物，要先将要买的物品（行）全部写在单子上（文档碎片），然后超市全部购买，而不会想到一样东西就去一次，那么 
var frag=document.createDocumentFragment(); 
for(var i=0;i<MyArr.length;i++){ 
frag.appendChild(MyArr[i]); //将数组里的行全部添加到文档碎片中 
} 
DBody.appendChild(frag);//将文档碎片中的行全部添加到 body中 
DBody.CurrentCol=Col; //记录下当前排序的列 
}

JavaScript中的大小写一定要注意，很容易出错的。
以上代码测试成功，对日期的排序，效果如图
JavaScript Sort 表格排序
所有代码： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>表格排序</title> 
<script type="text/javascript"> 
var IsAsc=true; 
function SortTable(TableID,Col,DataType){ 
var imgSort=document.getElementById('col'+Col); 
//判断是逆序还是顺序 
if(IsAsc==true){ 
imgSort.src='img/arrow_small_down.png'; 
} 
else{ 
imgSort.src='img/arrow_small_up.png'; 
} 
IsAsc=!IsAsc; 
var DTable=document.getElementById(TableID); 
var DBody=DTable.tBodies[0]; 
var DataRows=DBody.rows; 
var MyArr=new Array; 
for(var i=0;i<DataRows.length;i++){ 
MyArr[i]=DataRows[i]; 
} 
//判断上次排序的列和这次是否为同一列 
if(DBody.CurrentCol==Col){ 
MyArr.reverse(); //将数组倒置 
} 
else{ 
MyArr.sort(CustomCompare(Col,DataType)); 
} 
//创建一个文档碎片，将所有的行都添加进去，相当于一个暂存架，目的是（如果直接加到document.body里面，会插入一行，就刷新一次，如果数据多了就会影响用户体验） 
//先将行全部放在暂存架里面，然后将暂存架里面的行 一起添加到document.body，这样表格只会刷新一次。 
//就像你去商店购物，要先将要买的物品（行）全部写在单子上（文档碎片），然后超市全部购买，而不会想到一样东西就去一次，那么 
var frag=document.createDocumentFragment(); 
for(var i=0;i<MyArr.length;i++){ 
frag.appendChild(MyArr[i]); //将数组里的行全部添加到文档碎片中 
} 
DBody.appendChild(frag);//将文档碎片中的行全部添加到 body中 
DBody.CurrentCol=Col; //记录下当前排序的列 
} 
function CustomCompare(Col,DataType){ 
return function CompareTRs(TR1,TR2){ 
var value1,value2; 
//判断是不是有customvalue这个属性 
if(TR1.cells[Col].getAttribute("customvalue")){ 
value1=convert(TR1.cells[Col].getAttribute("customvalue"),DataType); 
value2=convert(TR2.cells[Col].getAttribute("customvalue"),DataType); 
} 
else{ 
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType); 
value2=convert(TR2.cells[Col].firstChild.nodeValue,DataType); 
} 
if(value1 < value2) 
return -1; 
else if(value1 > value2) 
return 1; 
else 
return 0; 
}; 
} 
function convert(DataValue,DataType){ 
switch(DataType){ 
case "int": 
return parseInt(DataValue); 
case "float": 
return parseFloat(DataValue); 
case "date": 
return new Date(Date.parse(DataValue)); 
default: 
return DataValue.toString(); 
} 
} 
</script> 
</head> 
<body> 
<div id="container"> 
<table border="1" id="MyTable"> 
<thead> 
<tr> 
<td onclick="SortTable('MyTable',0,'string')" style="cursor:pointer">图片排序 <img id="col0" src="img/arrow_small_up.png" /> </td> 
<td onclick="SortTable('MyTable',1,'int')" style="cursor:pointer">整数排序 <img id="col1" src="img/arrow_small_up.png" /></td> 
<td onclick="SortTable('MyTable',2,'float')" style="cursor:pointer">浮点数排序<img id="col2" src="img/arrow_small_up.png" /></td> 
<td onclick="SortTable('MyTable',3,'string')" style="cursor:pointer">字符串排序<img id="col3" src="img/arrow_small_up.png" /></td> 
<td onclick="SortTable('MyTable',4,'date')" style="cursor:pointer">日期排序 <img id="col4" src="img/arrow_small_up.png" /></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td customvalue="doc"> 
<img src="img/wordicon.gif" /></td> 
<td>2</td> 
<td>5.4</td> 
<td>zd</td> 
<td>2009-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="zip"> 
<img src="img/zippedfoldericon.gif" /></td> 
<td>267</td> 
<td>8.9</td> 
<td>xx</td> 
<td>2002-10-31 14:36:13</td> 
</tr> 
<tr> 
<td customvalue="xlt"> 
<img src="img/excelicon.gif" /></td> 
<td>6</td> 
<td>60.4</td> 
<td>ty</td> 
<td>2009-10-31 19:33:13</td> 
</tr> 
<tr> 
<td customvalue="txt"> 
<img src="img/notepadicon.gif" /></td> 
<td>9</td> 
<td>0.8</td> 
<td>lp;</td> 
<td>2004-5-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="doc"> 
<img src="img/wordicon.gif" /></td> 
<td>34</td> 
<td>9.4</td> 
<td>cv</td> 
<td>1009-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="txt"> 
<img src="img/notepadicon.gif" /></td> 
<td>289</td> 
<td>23.4</td> 
<td>uio</td> 
<td>2005-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="zip"> 
<img src="img/zippedfoldericon.gif" /></td> 
<td>45</td> 
<td>89.4</td> 
<td>cb</td> 
<td>1039-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="doc"> 
<img src="img/wordicon.gif" /></td> 
<td>2</td> 
<td>5.4</td> 
<td>zd</td> 
<td>2009-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="txt"> 
<img src="img/notepadicon.gif" /></td> 
<td>42</td> 
<td>9.3</td> 
<td>bm</td> 
<td>1069-10-31 14:34:14</td> 
</tr> 
</tbody> 
</table> 
</div> 
</body> 
</html>

JavaScript Sort 表格排序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JavaScript中innerHTML，innerText，outerHTML的用法及区别
Sep 01 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
一句jQuery代码实现返回顶部效果（简单实用）
Dec 28 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 #Javascript
javascript GUID生成器实现代码
Oct 31 #Javascript
json 实例详细说明教程
Oct 31 #Javascript
json 入门基础教程 推荐
Oct 31 #Javascript
jquery text()要注意啦
Oct 30 #Javascript
CCPry JS类库 代码
Oct 30 #Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 #Javascript
排序失效(1) NFS(1) 黑名单(1) 重复数据(2) timestamp(1) Logrotate(1) 批处理(1) 临时表(1) T-SQL(1) ftpserver(1)
You might like
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
js树形控件脚本代码
2008/07/24 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
在python里从协程返回一个值的示例
2019/02/19 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python自动生成model文件过程详解
2019/11/02 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
python读取xml文件方法解析
2020/08/04 Python
python 使用建议与技巧分享（四）
2020/08/18 Python
总务岗位职责
2013/11/19 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
捐助倡议书范文
2014/04/15 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
解放思想演讲稿
2014/09/11 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
第一书记观后感
2015/06/08 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
星际争霸：毕姥爷vs解冻01
2022/04/01 星际争霸
ipad隐藏软件app图标方法
2022/04/19 数码科技
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers