首页
所有分类
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 focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JavaScript中Function详解
Feb 27 Javascript
js实现加载更多功能实例
Oct 27 Javascript
Vue分页组件实例代码
Apr 17 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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) 查找算法(1) 数据保存(1) bs4(1) 分块(1) 装饰器(1) 数组(5) decorator(1) translation(2) 读取(1)
You might like
php简单静态页生成过程
2008/03/27 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript操作文本框readOnly
2007/05/15 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
Javascript 学习笔记之 对象篇（二） : 原型对象
2014/06/24 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
jQuery实现穿梭框效果
2021/01/19 jQuery
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
pygame实现俄罗斯方块游戏（基础篇2）
2019/10/29 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
北美大型运动类产品商城：Champs Sports
2017/01/12 全球购物
全球领先的美容用品专卖店：Beauty Plus Salon
2018/09/04 全球购物
Guess美国官网：美国知名服装品牌
2019/04/08 全球购物
美国豪华的多品牌精品店：The Webster
2019/07/31 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
事业单位公务员的职业生涯规划
2014/01/15 职场文书
后备干部考察材料
2014/02/12 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
大学活动总结模板
2014/07/10 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2014年新教师工作总结
2014/11/08 职场文书
Python实现打乒乓小游戏
2021/09/25 Python