日期:2014-05-16  浏览次数:20593 次

【分享】Table排序类
前一阵做了个网盘,用到了table的排序,趁热打铁做一个完整的table排序类出来。

程序的实现的是在客户端对表格进行排序,有以下特点:
1.自定义排序列、排序属性(例如innerHTML)、排序数据类型(包括int、float、date、string)、排序顺序(顺序和倒序);
2.自定义排序函数;
3.可同时设置多个排序列;
4.支持ie/ff。

网上也有很多其他的table排序函数,但有的是基于数组,有的不够灵活。我的这个能在原有table结构上加入功能,不用太多改动,基于oo的结构也易于使用(当然前提是对js有一定认识)。这里只是满足基本需求,接口可能不够完善,可以自己动手扩展。

基本步骤: 

1,把需要排序的行放到tbody中(程序会直接取tbody的rows);
2,把排序行放到一个数组中;
JScript code
Each(this.tBody.rows, function(o){ this.Rows.push(o); }.bind(this)); 

3,按需求对数组进行排序(用数组的sort方法);
JScript code
this.Rows.sort(!this._order.Compare ? this.Compare.bind(this) : this._order.Compare);

4,用一个文档碎片(document.createDocumentFragment())保存排好序的行;
JScript code

var oFragment = document.createDocumentFragment();
Each(this.Rows, function(o){ oFragment.appendChild(o); });


5,把文档碎片appendChile到tbody中。
JScript code

this.tBody.appendChild(oFragment); 



程序说明:

【排序函数】

排序就不得不说数组中sort这个方法,手册是这样介绍的:返回一个元素已经进行了排序的 Array 对象。也就是对一个数组进行排序,很多跟排序相关的操作都用到这个方法。

默认按照 ASCII 字符顺序进行升序排列,使用参数的话可以自定义排序方法了。
这里为了使排序能适合各种类型的值,定义了一个排序函数作为参数:
JScript code

  Compare: function(o1, o2) {
    var value1 = this.GetValue(o1), value2 = this.GetValue(o2);
    return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
  },

对于字符来说用localeCompare会更方便,但不支持日期和数字格式,所以这里用了大于小于号来做比较。要注意,如果为 sortfunction 参数提供了一个函数,那么该函数必须返回下列值之一: 
负值,如果所传递的第一个参数比第二个参数小。 
零,如果两个参数相等。 
正值,如果第一个参数比第二个参数大。
这些都是写自定义排序函数时要注意的。

【获取比较值】

很多时候要比较的值并不是直接取innerHTML的值,那怎么放这个比较值呢?我这里的方法是给td设置了一个属性来放这个值(例如_ext和_order),取这个值也有一点技巧,对ie来说用一般的方法取都可以,但ff就麻烦一点,对于自定义的数序需要用getAttribute来获取,对原有的属性(例如innerHTML)就需要td["属性"]这样的方式来取:
JScript code

var td = tr.getElementsByTagName("td")[this._order.Index]
    , data = td[this._order.Attri] ? td[this._order.Attri] : td.getAttribute(this._order.Attri);

取得了值后就根据需要的数据类型转换:
JScript code

    switch (this._order.DataType.toLowerCase()) {
        case "int":
            return parseInt(data) || 0;
        case "float":
            return parseFloat(data) || 0;
        case "date":
            return Date.parse(data) || 0;
        case "string":
        default:
            return data.toString() || "";
    }

这里要说明的是添加自定义属性并不是一个符合标准的方法,可以考虑放在title之类的属性中。

【排序对象】

排序对象主要是用来保存该排序的属性的,这里包括:
属性 默认值//说明
Attri "innerHTML";//获取数据的属性
DataType "string";//比较的数据类型
Down true;//是否按顺序
onSort function(){};//排序时执行
Compare null;//自定义排序函数
还有两个固定属性:
Index:td索引
Sort:设置当前排序对象为排序类的排序对象,并执行排序

一个table通常都有多个排序方式,排序对象的作用是保存各个排序方式的参数,排序时就直接使用当前排序对象的属性,这样各个排序方式就互相独立不会互相影响了。

还有文档碎片这里并不是必须的,但建议使用,大量dom操作时使用文档碎片会更有效率。
这里的触发是a,但按上去是没有边框的啊,因为我设置了这个样式:
CSS code

                    香港云服务器 免备案 云主机VPS 国内 独立IP 独享15M 月付SSD