【分享】Table排序类前一阵做了个网盘，用到了table的排序，趁热打铁做一个完整的table排序类出来。程序的实现
【分享】Table排序类
前一阵做了个网盘，用到了table的排序，趁热打铁做一个完整的table排序类出来。
程序的实现的是在客户端对表格进行排序，有以下特点：
1.自定义排序列、排序属性（例如innerHTML）、排序数据类型（包括int、float、date、string）、排序顺序（顺序和倒序）；
2.自定义排序函数；
3.可同时设置多个排序列；
4.支持ie/ff。
网上也有很多其他的table排序函数，但有的是基于数组，有的不够灵活。我的这个能在原有table结构上加入功能，不用太多改动，基于oo的结构也易于使用（当然前提是对js有一定认识）。这里只是满足基本需求，接口可能不够完善，可以自己动手扩展。
基本步骤：
1，把需要排序的行放到tbody中（程序会直接取tbody的rows）；
2，把排序行放到一个数组中；
JScript codeEach(this.tBody.rows, function(o){ this.Rows.push(o); }.bind(this));
3，按需求对数组进行排序（用数组的sort方法）；
JScript codethis.Rows.sort(!this._order.Compare ? this.Compare.bind(this) : this._order.Compare);
4，用一个文档碎片（document.createDocumentFragment()）保存排好序的行；
JScript codevar oFragment = document.createDocumentFragment();Each(this.Rows, function(o){ oFragment.appendChild(o); });
5，把文档碎片appendChile到tbody中。
JScript codethis.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 codevar 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 codea{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}
使用方法：
首先实例化一个主排序对象，参数是table的id：
JScript codevar to = new TableOrder("idTable");
接着要添加一个排序对象，可设置相应属性（参考【排序对象】）：
JScript codevar order2 = to.Add(0, { onSort: function(){ Each(SetOrder._arr, function(o){ o.className = ""; }); }, Compare: function(o1, o2) { var value1 = /x/i.test(to.GetValue(o1)), value2 = /x/i.test(to.GetValue(o2)); return value1 && !value2 ? 1 : !value1 && value2 ? -1 : 0; }});
然后设置一个触发对象执行排序对象的Sort方法来排序：
JScript code$("idBtn").onclick = function(){ order2.Sort(); }
[解决办法]多谢分享，。。。
[解决办法]留个脚印
顺便向你学习！~
[解决办法]收藏
[解决办法]向LZ学习
[解决办法]up
[解决办法]顶
[解决办法]呵呵!头两天刚收藏起来
[解决办法]xuexi
[解决办法]up
[解决办法]zhi chi
[解决办法]youlao
[解决办法]高手，什么时候也有这么NB
[解决办法]ding
[解决办法]study
[解决办法]来看看.
想写一个呢，一直没动，呵呵。学习个.
[解决办法]谢谢分享,学习~
[解决办法]什么时候JS能学成这样哦~
[解决办法]牛，学习学习
[解决办法]收藏，学习。
[解决办法]up
[解决办法]以前玩asp的时候做过，包括table的排序、分页（用lazy法，结合xmlhttp对象使用的）、调整列宽、调整列顺序等等操作
[解决办法]我刚刚发的回复怎么没有显示?
[解决办法]向LZ学习
[解决办法]mark[解决办法]很好 很强大 ...学习
------解决方案--------------------
好啊
[解决办法]楼主真是挺敬业 学习了
[解决办法]留个脚印
顺便向你学习！
[解决办法]收藏
[解决办法]接分看看
[解决办法]收藏
[解决办法]留個腳印
[解决办法]学习
[解决办法]好帖学习了，感谢楼主。
[解决办法]向LZ学习了
[解决办法]mark
[解决办法]楼主真是挺敬业 学习了
[解决办法]MARK
[解决办法]这个很有用，谢谢
[解决办法]不错，学习中
[解决办法]收藏了，呵呵
[解决办法]顶
[解决办法]mark
[解决办法]谢谢了，向楼主学习
[解决办法]up+收藏
[解决办法]顶...
[解决办法]哇塞，都是高手。
[解决办法]多谢楼主的共享，你的BLog 有不少值得我学习的地方 谢谢
[解决办法]LZ 很强
[解决办法]OK
[解决办法]看没有看呢，都觉得很好！
评价太高了！
[解决办法]jf
[解决办法].
[解决办法]UP!
[解决办法]帮顶
[解决办法]恩..学习了啊·
·
[解决办法]好东西。学习了！！睡哦藏
[解决办法]xuexi
[解决办法]搞不太懂，收藏学习.
[解决办法]学啊！！！
------解决方案--------------------
学习，感谢楼主分享。
[解决办法]学习，多谢分享
[解决办法]不错...好东西..
[解决办法]学习了
[解决办法]收下了
[解决办法]收藏了
[解决办法]mark
[解决办法]博客园见过这片文章了
[解决办法]这么强大
谢谢LZ
[解决办法]分頁的話有排序的效果嗎？
[解决办法][解决办法]网盘系统开发中````
[解决办法]牛人啦,顶下
[解决办法]牛人啦,顶下
谢谢！
[解决办法]我也写了一个和楼主性质不一样的，呵呵，楼主不仅代码写的好，还有文档，我这个就是小儿科了，贴上来做绿叶
http://blog.csdn.net/sunyujia/archive/2008/08/04/2768020.aspx
[解决办法]学习。。。
[解决办法]学习，顶！
[解决办法]学习~~ 支持
[解决办法]JS还没学到呢，看看了
[解决办法]收藏~~学习
[解决办法]mark
[解决办法]收藏~~!学习ing
[解决办法]牛人
[解决办法]先收藏下。。。慢慢斟酌
[解决办法]学习
[解决办法]hao a a
[解决办法]看上去 很难啊!!
[解决办法]仰望一下大侠！
[解决办法]mark 学习
