- 浏览: 6854376 次
- 性别:
- 来自: 上海
最新评论
-
autosuggestion:
实现一个智能提示功能需要JavaScript、ajax、数据库 ...
自动提示结果 -
岁月之眸:
...
Java读TXT文件 -
yujian58:
写的好。
在线客服技术方案 -
QQ1067184821:
你好,能不能发个完整的给我呢?1067184821@qq.co ...
Extjs3.2+Json lib动态树与GridPanel简单展现 -
chenhua0725:
能不能发一个完成的包给我呢,谢谢了,83667664@qq.c ...
Extjs3.2+Json lib动态树与GridPanel简单展现
table排序类,点击第一行标题可以排序
<!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>table排序类,点击第一行标题可以排序
corange.cn</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*/ 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);}
</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 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.tBody = $(tbody);//tbody对象
this.Rows = [];//行集合
this._order = null;//排序对象
Each(this.tBody.rows, function(o){ oThis.Rows.push(o); })
},
//排序并显示
Sort: function() {
//排序
if(!this._order){ return false };//没有排序对象返回
this.Rows.sort(!this._order.Compare ? this.Compare() : 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() {
var oThis = this;
return function(o1, o2) {
var value1 = oThis.GetValue(o1), value2 = oThis.GetValue(o2);
return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
};
},
//获取比较值
GetValue: function(tr) {
var data = tr.getElementsByTagName("td")[this._order.Index].getAttribute(this._order.Attribute);
//数据转换
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.Attribute = "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);
//添加一个排序对象
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" });
var order2 = to.Add(0, {
Compare: function(o1, o2) {
var value1 = /x/i.test(to.GetValue(o1)), value2 = /x/i.test(to.GetValue(o2));
if(value1 && !value2){
return 1;
} else if (!value1 && value2){
return -1;
} else {
return 0;
}
//return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
}
});
$("idBtn").onclick = function(){
order2.Sort();
}
</script>
</body>
</html>
发表评论
-
jQuery+Ajax+PHP+Mysql实现分页显示数据
2013-09-09 15:54 2812jQuery+Ajax+PHP+Mysql实现分页显示数 ... -
Tab页界面,用jQuery及Ajax技术实现
2009-09-19 18:06 1757从桌面开发的时代开始,Tab页就是一个优异的界面布局形式,兼有 ... -
自动提示结果
2008-12-05 14:39 1102自动提示结果,仿google搜索框提示 http://ww ... -
visibility和display区别
2008-12-05 19:55 872它们都可以实现对域的隐藏,但visibility要占用域的空间 ... -
可放在网页旁边的导航菜单,点击向右边展开
2008-12-05 20:04 1208<iframe name="google_ad ... -
图片加载loading...
2008-12-06 10:39 1146<iframe name="google_ad ... -
iframe加载loading...
2008-12-06 10:40 1134<body> <div id="l ... -
发一个选项卡动态增删的效果..
2008-12-06 13:16 1046发一个选项卡动态增删的效果.. 仿126的效果,可以删除的ta ... -
复选框问题,将选定的值在textarea显示
2008-12-07 02:12 1124<iframe name="google_ ... -
表格复选和复选变色效果
2008-12-07 02:13 711<style type="text/c ... -
表格数据排序
2008-12-07 02:14 964<STYLE type=text/css>TA ... -
检测密码强度
2008-12-07 02:15 892<!DOCTYPE html PUBLIC &quo ... -
CNL Tree Menu Ver1.02无限级树形菜by CNLei枫岩
2008-12-07 02:15 1156<!DOCTYPE html PUBLIC &quo ... -
点击按钮,实现复制网址的代码
2008-12-07 02:19 1872<iframe name="google_ ... -
完全去除页面滚动条的方法
2008-12-07 02:21 1679今天做站的时候客户要求实现网站全屏,使用JavaScript: ... -
支持IE和火狐浏览器的加入收藏夹js代码
2008-12-07 20:01 2870支持IE和火狐浏览器的加入收藏夹js代码 如果想要在opera ... -
javascript实现换皮肤的一种思路
2008-12-07 20:11 870难点在于document.write输出html语句结构用法。 ... -
yiu简易网页调色板功能调用代码
2008-12-08 10:13 950简易网页调色板功能调用代码 colorSelect('色值 ... -
表格隔行换色+鼠标经过变色(ie6,ie7,ff)
2008-12-08 10:21 1099<!DOCTYPE html PUBLIC " ... -
在不刷新的情况下动态添加表格行
2008-12-08 11:49 904<!DOCTYPE html PUBLIC " ...
相关推荐
表格固定左序列、顶部序列、第一行、列标题、统计行; 自动统计,排序(自定义统计规则); 表格图文、序列号、列标题格式化; 表格各组成背景、文字、网格、padding等配置; 表格批注; 表格内容、列标题点击事件;...
表格固定左序列、顶部序列、第一行、列标题、统计行; 自动统计,排序(自定义统计规则); 表格图文、序列号、列标题格式化; 表格各组成背景、文字、网格、padding等配置; 表格批注; 表格内容、列标题点击事件;...
表格固定左序列、顶部序列、第一行、列标题、统计行; 自动统计,排序(自定义统计规则); 表格图文、序列号、列标题格式化; 表格各组成背景、文字、网格、padding等配置; 表格批注; 表格内容、列标题点击事件;...
每个模版都可定义不同的样式,所以系统内置的功能的相关文件也都放在了模版里,每个模版里存储一份,避免替换系统目录下的其他文件。 ads/ 存放广告js文件,可自定义名称, 在当前模版路径的config.xml 里配置好 ...
rs.absolutepage=N 将记录指针移到第N页的第一行 rs.pagesize=N 设置每页为N条记录 rs.pagecount 根据 pagesize 的设置返回总页数 rs.recordcount 返回记录总数 rs.bof 返回记录指针是否超出数据表首端,true表示是...
//返回选中行第一列的值. 第1列的值: -->>> ListView1.Selected.Caption 第i列的值(i>1):-->>> ListView1.Selected.SubItems.Strings[i] ListView1.Items.Item[1].SubItems.GetText); //取得listview某行某...
1、如果你打命令时,回车后发现忘记加分号,你无须重打一遍命令,只要打个分号回车就可以了。也就是说你可以把一个完整的命令分成几行来打,完后用分号作结束标志就OK。 2、你可以使用光标上下键调出以前的命令...
程序运行的初始参数从某个指定的配置文件中读取(该文件名作为第一个参数传递给程序)。配置文件的格式详见范例文件。 学生的初始房间分配情况从某个指定的文件中读取(该文件名作为第二个参数传递给程序)。该文件...
第一章 设计...7 11、控......9 12、鼠标操作............ .........9 13、工具栏.10 131、设计模式工具栏............10 132、“标准”工具栏.............10 133、“文本”工具栏............
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
点击需要复制的第一列的列标题,然后按住‘Shift’键再点击需要复制的最后一列的列标题(按列复制时要求这些列必须相邻), 选择完毕后,在所选行上点击鼠标右键选择‘Copy’菜单进行复制。 ‘Copy’菜单有2个,...
-d 没有数据 –add-drop-table 在每个create语句之前增加一个drop table 4.导入数据库 A:常用source 命令 进入mysql数据库控制台, 如mysql -u root -p mysql>use 数据库 然后使用source命令,后面参数为脚本...
Ember Table可以处理超过100,000行,而没有任何呈现或性能问题。 此版本的Ember Table支持Ember 1.11到最新版本的Ember。安装ember install ember-table产品特点列大小调整,列重新排序。 表调整大小。 固定第一列...
在每组的第一行中显示组标题 用一行分隔每组 任务 9:在 BIRT 报告查看器中预览报告 任务 10:在目录中显示贷记限额范围 第九章、聚集数据 如何在表达式构建器中构造聚集表达式 第十章、编写表达式 第...
在每组的第一行中显示组标题 用一行分隔每组 任务 9:在 BIRT 报告查看器中预览报告 任务 10:在目录中显示贷记限额范围 第九章、聚集数据 如何在表达式构建器中构造聚集表达式 第十章、编写表达式 第十一章、过滤...
在流程设计阶段预设的参与者,执行并签(参与者互不影响),只要有1个参与者选择提交(同意),其它参与者可以不用再审批,直接流转至下一节点。 演示过程 在Portal门户的流程中心中发起【演示功能->多人活动】...
1. 判断第二个日期比第一个日期大 82 2. 用table显示n条记录,每3行换一次颜色,即1,2,3用红色字体,4,5,6用绿色字体,7,8,9用红颜色字体。 83 3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? ...