位置：首页>> 网络编程>> JavaScript>> JavaScript table的排序类

JavaScript table的排序类

作者：cloudgamer　来源：51js　发布时间：2008-10-06 12:56:00　

标签：排序,类,table,表格

table估计每个跟web打过交道的人都会经常接触到，跟js结合能做出很多不错的体验。
这里打算结合js做一个系列，包括一些操作和效果，虽然现在还没什么“系列”概念，只是想到什么功能就写一下。

前一阵做了个网盘，用到了table的排序，趁热打铁做一个完整的table排序类出来。

功能介绍：

1.自定义排序列、排序属性（例如innerHTML）、排序数据类型（包括int、float、date、string）、排序顺序（顺序和倒序）
2.自定义排序函数
3.可设置多个排序列
4.支持ie/ff

网上也有很多其他的table排序函数，但有的是基于数组，有的不够灵活。我的这个能在原有table结构上加入功能，不用太多改动，基于oo的结构也易于使用（当然前提是对js有一定认识）。

<!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-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><style type="text/css">.fu_list{ width:400px; border:1px solid #ebebeb;line-height:20px; font-size:12px;}.fu_list thead td{background-color:#ebebeb;}.fu_list td{padding:5px;}.fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}.fu_list a:link, .fu_list a:visited, .fu_list a:hover, .fu_list a:active{text-decoration:none;color:#333;}.fu_list thead a{padding-right:15px;}.fu_list thead a.up, .fu_list thead a.down{ background:url([img]http://www.fs12345.com/upphoto/cloud/5a539829-d9b9-4437-bc9c-20b32f1fc4b7.gif[/img]) right center no-repeat; }.fu_list thead a.down{background-image:url([img]http://www.fs12345.com/upphoto/cloud/76a4b69b-38b8-4abd-8a58-82d2ade8d526.gif[/img]);}</style><table border="0" cellspacing="0" cellpadding="0" class="fu_list"> <thead> <tr> <td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td> <td width="200" align="center"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td> <td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td> </tr> </thead> <tbody id="idList"> <tr> <td _ext="rar">new.rar</td> <td align="center" _order="2008/9/12 8:51:09">2008-9-12 8:51:09</td> <td align="right" _order="433247">423.09 K</td> </tr> <tr> <td _ext="js">TagControl.js</td> <td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> <td align="right" _order="1387">1.35 K</td> </tr> <tr> <td _ext="js">Scroller.js</td> <td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> <td align="right" _order="2556">2.5 K</td> </tr> <tr> <td _ext="js">AlertBox.js</td> <td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> <td align="right" _order="3565">3.48 K</td> </tr> <tr> <td _ext="htm">1.htm</td> <td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td> <td align="right" _order="11394">11.13 K</td> </tr> <tr> <td _ext="htm">4.htm</td> <td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td> <td align="right" _order="351">351 b</td> </tr> <tr> <td _ext="xml">news.xml</td> <td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> <td align="right" _order="14074">13.74 K</td> </tr> <tr> <td _ext="xsl">news.xsl</td> <td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> <td align="right" _order="16796">16.4 K</td> </tr> <tr> <td _ext="js">function.js</td> <td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> <td align="right" _order="2844">2.78 K</td> </tr> </tbody></table><input name="" type="button" value="有x的排后面" id="idBtn" /><script type="text/javascript">var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}Object.extend = function(destination, source) {for (var property in source) {destination[property] = source[property];}return destination;}Function.prototype.bind = function(object) { var __method = this, args = Array.prototype.slice.call(arguments); args.shift(); return function() {return __method.apply(object, args.concat(Array.prototype.slice.call(arguments))); }}function Each(list, fun){for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }};var TableOrder = Class.create();TableOrder.prototype = { initialize: function(tbody) {this.tBody = $(tbody);//tbody对象this.Rows = [];//行集合this._order = null;//排序对象Each(this.tBody.rows, function(o){ this.Rows.push(o); }.bind(this)) }, //排序并显示 Sort: function() {//没有排序对象返回if(!this._order){ return false };//排序this.Rows.sort(!this._order.Compare ? this.Compare.bind(this) : this._order.Compare);this._order.Down && this.Rows.reverse();//取反//显示表格var oFragment = document.createDocumentFragment();Each(this.Rows, function(o){ oFragment.appendChild(o); });this.tBody.appendChild(oFragment); }, //比较函数 Compare: function(o1, o2) {var value1 = this.GetValue(o1), value2 = this.GetValue(o2);return value1 < value2 ? -1 : value1 > value2 ? 1 : 0; }, //获取比较值 GetValue: function(tr) {var td = tr.getElementsByTagName("td")[this._order.Index], data = td[this._order.Attri] ? td[this._order.Attri] : td.getAttribute(this._order.Attri);//数据转换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() || "";} }, //添加并返回一个排序对象 Add: function(index, options) {var oThis = this;return new function(){//默认属性this.Attri = "innerHTML";//获取数据的属性this.DataType = "string";//数据类型this.Down = false;//是否按顺序this.Compare = null;//自定义排序函数Object.extend(this, options || {});//排序对象的属性this.Index = index;this.Sort = function(){ oThis._order = this; oThis.Sort(); };}; }}var to = new TableOrder("idList");function SetOrder(obj, index, options){var o = $(obj);//_arr是记录排序项目（这里主要用来设置样式）!SetOrder._arr && (SetOrder._arr = []); SetOrder._arr.push(o);//添加一个排序对象var order = to.Add(index, options);o.onclick = function(){//取相反排序order.Down = !order.Down;//设置样式Each(SetOrder._arr, function(o){ o.className = ""; })o.className = order.Down ? "down" : "up";//排序显示order.Sort();return false;}}SetOrder("idTitle", 0);SetOrder("idExt", 0, { Attri: "_ext" });SetOrder("idAddtime", 1, { Attri: "_order", DataType: "date" });SetOrder("idSize", 2, { Attri: "_order", DataType: "int" });var order2 = to.Add(0, {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;}});$("idBtn").onclick = function(){ order2.Sort(); }</script></body></html>

投稿

JavaScript table的排序类

猜你喜欢