js table排序类代码
js table排序类代码
发布时间:2016-12-29 来源:查字典编辑
摘要:table排序类.fu_list{width:400px;border:1pxsolid#ebebeb;line-height:20px;f...

table排序类 .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*/ text-decoration:none; color:#333;} .fu_list thead a{padding-right:15px;} .fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) right center no-repeat; } .fu_list thead a.down{background-image:url(down.gif);}

名称 / 类型 上传时间 大小
new.rar 2008-9-12 8:51:09 423.09 K
TagControl.js 2008-9-23 11:26:57 1.35 K
Scroller.js 2008-9-23 11:26:57 2.5 K
AlertBox.js 2008-9-23 11:26:57 3.48 K
1.htm 2008-10-4 20:21:54 11.13 K
4.htm 2008-10-4 20:21:54 351 b
news.xml 2008-10-4 20:24:11 13.74 K
news.xsl 2008-10-4 20:24:11 16.4 K
function.js 2008-10-4 20:24:11 2.78 K
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 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) { var oThis = this; this.Body = $(tbody);//tbody对象 this.Rows = [];//行集合 Each(this.Body.rows, function(o){ oThis.Rows.push(o); }) }, //排序并显示 Sort: function(order) { //排序 this.Rows.sort(this.Compare(order)); order.Down && this.Rows.reverse(); //显示表格 var oFragment = document.createDocumentFragment(); Each(this.Rows, function(o){ oFragment.appendChild(o); }); this.Body.appendChild(oFragment); }, //比较函数 Compare: function(order) { var oThis = this; return function(o1, o2) { var value1 = oThis.GetValue(o1, order), value2 = oThis.GetValue(o2, order); return value1 < value2 ? -1 : value1 > value2 ? 1 : 0; }; }, //获取比较值 GetValue: function(tr, order) { var data = tr.getElementsByTagName("td")[order.Index].getAttribute(order.Attribute); //数据转换 switch (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.Attribute = "innerHTML";//获取数据的属性 this.DataType = "string";//数据类型 this.Down = false;//是否按顺序 Object.extend(this, options || {}); //排序对象的属性 this.Index = index; this.Sort = function(){ oThis.Sort(this); }; }; } } var to = new TableOrder("idList"); function SetOrder(obj, index, options){ var o = $(obj); //添加一个排序对象 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; } //_arr是记录排序项目(这里主要用来设置样式) SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = []; } SetOrder("idTitle", 0); SetOrder("idExt", 0, { Attribute: "_ext" }); SetOrder("idAddtime", 1, { Attribute: "_order", DataType: "date" }); SetOrder("idSize", 2, { Attribute: "_order", DataType: "int" });

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新ASP教程学习
热门ASP教程学习
编程开发子分类