JavaScript Sort 表格排序

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中的大小写一定要注意，很容易出错的。
以上代码测试成功，对日期的排序，效果如图

所有代码：


代码如下:

<!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>

赞 (0)

相关推荐

  • javascript实现表格排序 编辑 拖拽 缩放

    简单表格排序 可以双击编辑 自定义编辑后的 规则 可拖动列进行列替换 可推动边框进行列宽度的缩放 复制代码 代码如下: <!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/xht

  • JavaScript实现表格排序方法

    JavaScript实现表格排序方法

    参考代码: 复制代码 代码如下: <!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> <meta http-equ

  • JS实现简单表格排序操作示例

    JS实现简单表格排序操作示例

    本文实例讲述了JS实现简单表格排序操作.分享给大家供大家参考,具体如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html" charset="utf-8"> <title>sort table</title> <style> *{ margin:0px; pad

  • 分享一个自己写的table表格排序js插件(高效简洁)

    像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用).原生态js的table排序插件等,最后比较看了下--采用了一个原生态js的table排序插件,并在其基础上做了些修改,虽有些勉强或有些地方使用不太舒服,但最算是比较好的实现了当时需要的功能.而前两天,对原有表格做了点儿修改--增加隔行换色的功能,问题就出现了,--效果错乱:检查分析了下,问题出在其table排序插件代码上--其原代码写的比较难理解,修改还不如重新自己写一个table排序插件. 说写就写,ta

  • javascript多种数据类型表格排序代码分析

    中文汉字排序. 中英文混合排序. 数据大小排序. 文件类型排序(后缀名排序) 日期时间排序. 价格排序. 中文混合数字排序; 使用方法:文档载入后new tableListSort(arguments,arguments). 接受两个参数:第一个参数为必须的,可以是字符串ID,也可以是table对象;第二个可选参数,此参数为一个对象,{data:index,fileType:index,fn:function(){}}:对象有三个可选的属性,第一个和第二个为扩展排序的数据类型,第三个参数为排序后

  • JS实现HTML表格排序功能

    本文实例为大家分享了JavaScript实现HTML表格排序功能,供大家参考,具体内容如下 HTML代码: <table cellpadding="0" id="table"> <tr class="top"> <td>click me</td> <td>click me</td> <td>click me</td> <td>click m

  • js 表格排序(编辑+拖拽+缩放)

    Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ over

  • js 静态HTML表格排序功能实现

    无标题文档 *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} body{text-align:center;} table{margin:100px auto;} td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} .red{color:red;} .top{background:

  • tablesorter.js表格排序使用方法(支持中文排序)

    tablesorter.js表格排序使用方法(支持中文排序)

    最近,因为项目需要,对表格排序做了一下摸索,整理如下: 1. 首先,可从官网下载tablesorter.js,但并不支持中文的排序,对其源码进行修改: 部分源码: function sortText(a, b) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }; function sortTextDesc(a, b) { return ((b < a) ? -1 : ((b > a) ? 1 : 0)); }; 修改后: function

  • 33种Javascript 表格排序控件收集

    33种Javascript 表格排序控件收集

    1. jQuery tablesorter http://tablesorter.com/docs/ 2. Table sorting with Prototype http://tetlaw.id.au/view/blog/table-sorting-with-prototype/ 3. Sorttable http://www.kryogenix.org/code/browser/sorttable/ 4. Table Sorting Javascript http://yoast.com/

  • javascript 表格排序和表头浮动效果(扩展SortTable)

    一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"

随机推荐