js table排序类代码

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 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需刷新才能执行]

赞 (0)

相关推荐

  • 一实用的实现table排序的Javascript类库

    一个Javascript 的类库,用于table内容排序.使用很方便,不用每次都去调用数据库了. 特别适合多表查询的排序.加上<tbody>的style.display 切换,也可以实现分页. 效果演示 用法: 1.添加JS <SCRIPT src="sorttable.js" type="text/javascript"></SCRIPT> 2.添加TABLE,注意的是:一定要有ID,class为"sortable&q

  • 实现超用户体验 table排序javascript实现代码

    实现超用户体验 table排序javascript实现代码

    以前我在网上总会看类似这种的JS效果: 点击编辑时: (不好意思哈,图在文章最后面) 这种列表与编辑都在同一页的效果,确实很好,能够给用户带来意想不到的美好体验.可是它是怎么实现的呢? 其实实现这种效果有很多方法,当然如果你的JS不好,可以用JQuery的组件,但是我想要是自己能写出来总是好的.因此我抽了点时间来实现它.当我实现后,发现要实现这种效果是很简单的,几行JS代码就搞定了,关键就是一个思路问题,下面我会具体的写是怎么实现的. 总体思路:给<TR>一个ID,以显示与隐藏来实现这种效果.

  • JavaScript Table排序 2.0 (更新)

    近来还是那么忙,趁五一更新一下程序吧. 这个版本主要增加和改进了以下东西: 1,对字符串改用localeCompare来比较: 2,一次排序中能使用多个排序对象(用于值相等时再排序): 3,修正一些发现的问题: 4,改进程序结构,个人觉得是更灵活更方便了: 5,增加bool类型比较: 6,添加attribute/property的内容: 7,修正ie6/7的radio/checkbox状态恢复bug: 8,增加自定义取值函数. Table 排序 .odTable { width:500px; b

  • javascript table排序 这个更简单了，不用改变现在的表格结构

    JavaScript实现可自定义排序的表格 - BODY { FONT-SIZE: 0.8em; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif } P { FONT-WEIGHT: bold; MARGIN-BOTTOM: 0px } .tableWidget_headerCell { BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; C

  • html中table数据排序的js代码

    对了,注意那个innerText和innerHTML 复制代码 代码如下: function sortCells(event) { var obj = event.target; var count = 0; count是记录点击次数的,根据奇偶进行升序或降序 if(!obj.getAttribute("clickCount")){ obj.setAttribute("clickCount", 0); } else { count = parseInt(obj.ge

  • jquery中的sortable排序之后的保存状态的解决方法

    当时也就从jquery的官方网站上抄了几句搞上去,后来发现用处不大,还挺慢.汗---以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来,正好现在公司要做一个这样的功能,就又从新学习了下.首先,在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码.我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果.就像igoogle首页那样的.冒似很简单,把要引用的js

  • js table排序类代码

    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-de

  • js常用排序实现代码

    复制代码 代码如下: <script> Array.prototype.swap = function(i, j) { var temp = this[i]; this[i] = this[j]; this[j] = temp; } Array.prototype.bubbleSort = function() { for (var i = this.length - 1; i > 0; --i) { for (var j = 0; j < i; ++j) { if (this[j

  • 分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容

    分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容

    问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS的运行情况,但发布时又因为IE不支持console,又要去掉这些代码,一不小心就会出错. 本文分享自己昨晚写的一个console类来试图解决这一问题.当然,更好的做法是把测试代码分开写,那样就不会有这个问题. 解决思路 如何解决IE下不兼容的问题呢,那就是我们自己定义一个console类来覆盖浏览器

  • js,jQuery 排序的实现代码,网页标签排序的实现,标签排序

    js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用对象数组内容覆盖网页上的标签数组; //排序从文字短的到长的 复制代码 代码如下: //排序从文字短的到长的 var arr_a=new Array(); var i=0; $(".type_list_txt > span:contains('T恤')").parent().chil

  • js 根据对象数组中的属性进行排序实现代码

    这篇文章主要介绍了js 根据对象数组中的属性进行排序实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 var arr = [ {name:'a',age:9}, {name:'b',age:12}, {name:'c',age:8} ]; arr.sort((a,b)=>{ return a.age - b.age }); function compare(property){ return function(a,b){ var

  • 两种简单实现菜单高亮显示的JS类代码

    记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式. 第一种判断当前URL值高亮类代码: 复制代码 代码如下:

  • 用jquery.sortElements实现table排序

    项目中要实现table排序的功能. 网上有很多解决方案,很多都基于jQuery. jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题. DataTables,大小75KB,功能强大,带分页,搜索等功能. 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星. 最后我选择用sortElements,实现很简单: 1. 引入jQuery 复制代码 代码如下: <script type="text/java

  • jquery.tableSort.js表格排序插件使用方法详解

    jquery.tableSort.js表格排序插件使用方法详解

    本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &

  • php 文章调用类代码

    调用方法如下: 复制代码 代码如下: $Template= '<li class="xxx">[<a href="{catedir}">{catetitle}</a>]<a href="{html}" title="{title}" >{title|6}{title2|20}</a>点击数:{hits} 日期:{posttime|H:i:s}</li>';

  • TableSort.js表格排序插件使用方法详解

    本文实例为大家分享了TableSort.js表格排序的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TableSort</title> <style type="text/css"> table { bor

随机推荐