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方法的修改只需如此如此
复制代码 代码如下: