首页
所有分类
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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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
触发器(3) XML(1) 数据类型(8) zip(1) 自动化(1) Geospatial(1) enumerate(1) Bean(3) IOC(3) metaclass(1)
You might like
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
JavaScript中的this机制
2016/01/30 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[15:15]教你分分钟做大人：狙击手
2014/10/30 DOTA
[01:50]《我与DAC》之玩家：iG夺冠时的那面红旗
2018/03/29 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python实现图片拼接的代码
2018/07/02 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
见习期自我鉴定
2014/01/31 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
关爱残疾人标语
2014/06/25 职场文书
小学庆六一活动总结
2014/08/28 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
贷款工作证明模板
2015/06/12 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
导游词之天津古文化街
2019/11/09 职场文书