闲着没事,随便写了个简单的Table排序的js,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧,最下面是效果,着急的就直接往下拉好了.新发现一个bug:10比2小,原因是sort默认是按ascii排序的,已修复该问题.
旧版DEMO下载
最新DEMO下载 [修复了一些已知的问题,结合网友的回复优化了一些代码,用法跟原来要样]
html代码[可以不看,跟html没什么关系.]:
javascript代码:
示例:
posted @ 2008-04-20 00:51
狼Robot Views(3536)
Comments(43) Edit 收藏
Post Comment
楼主太强了！我一定要偷来用，俺才发觉咱俩目前做的很多事情都很相通啊。多谢！
@李战
不敢当了,你就不要再笑我了.我菜,我知道.
以后多点化下我,让我也能沾沾佛主的光.呵呵.
很强，代码量也很少，以后用了有版权问题吗？
谢谢博主。
不错，不过我发现你的排序是有问题的，如果A的年龄是9，B的年龄是89，你的升序排序结果B-A，因为只是简单的字符排序，这种情况是不适合的，要支持对数据类型的排序，就要对不同类型的数据识别，可以使用正则表达式来判断，网上现成的有很多，可以参考一下。
加入收藏夹了，希望楼主多发这些JS实用的特效，谢谢了！
期待窗口悬浮DEMO，谢谢了
@Agan@CN
早上起来发现了这个问题.现在修复了.呵呵.估计你看的时候我在上传.
@yfalcon
看代码就知道了,这个只是针对一个现有的table排序的,如果要翻页排序就不是这样写的.
不是拖动
是那种可以最大化窗口，也可以小化缩到右下角。
@sharelai
你的意思是在web里仿windows的窗口?可以拖动,最大化最不化?
按理来说应该不难,等我下次闲的时候试试看能不能写出来.
@Agan@CN
开始发现了,改过了的.结果不知道搞来搞去又搞不见了.
原因是IsNumeric方法的正则少了两个字符[^$].
--引用--------------------------------------------------
狼Robot: @Agan@CN
开始发现了,改过了的.结果不知道搞来搞去又搞不见了.
原因是IsNumeric方法的正则少了两个字符[^$].
--------------------------------------------------------
@Ants
还是有问题,IsNumeric中的[]应该换成()才对,郁闷,想放个demo看来还是有点麻烦,改了blog上的忘了改本机的,改了本机的又覆盖了blog的.
我也弄了一个
<table style="border:solid 1px #DDDDDD;" frame='border' rules='all' cellpadding="0" cellspacing="0" id="tbsort">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>工号</th>
<th>职位</th>
<th>性别</th>
<th>业绩</th>
<th>报到时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>刘德华</td>
<td>8008</td>
<td>总裁</td>
<td>男</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>吴奇隆</td>
<td>8004</td>
<td>主管</td>
<td>男</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>王光良</td>
<td>8003</td>
<td>经理</td>
<td>男</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>张学友</td>
<td>8009</td>
<td>副总裁</td>
<td>男</td>
<td>9</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>张柏芝</td>
<td>8005</td>
<td>助理</td>
<td>女</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>***</td>
<td>8001</td>
<td>总监</td>
<td>男</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>陈慧琳</td>
<td>8002</td>
<td>试用期</td>
<td>女</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>张曼玉</td>
<td>8007</td>
<td>高级经理</td>
<td>女</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>周润发</td>
<td>8006</td>
<td>副总裁</td>
<td>男</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</tbody>
</table>
<script type='text/javascript'>
window.$id = function(id) {
return document.getElementById(id);
};
window.$tag = function(tag, elem) {
return (elem || document).getElementsByTagName(tag);
};
window.$A = function(obj) {
var ret = [];
for (var i = 0, l = obj.length; i < l; i++) {
ret.push(obj[i]);
}
return ret;
};
function tableSorter(opt) {
this.init(opt);
}
tableSorter.prototype = {
/**
*opt参数：{el:表格id，sortRows:要排序的列,sortcallback:排序后执行的函数}
*/
init: function(opt) {
this.el = $id(opt.el);//表格
this.sortcallback = opt.sortcallback;
this.sortRows = opt.sortRows;
this.orderRule = [];//各列的排序方向：升序、倒序
this.bindEvents();
},
bindEvents: function() {
this.rows = $A(this.el.tBodies[0].rows)/*Array.prototype.slice.call(this.el.tBodies[0].rows)似乎在ie下行不通？*/;
this.ths = this.el.tHead ? this.el.tHead.rows[0].cells : this.rows.shift().cells;/*表格没有定义thead就取第一行*/
var l = this.sortRows ? this.sortRows.length : this.ths.length;/*不指定要排序的列则默认所有列排序*/
if (this.sortRows)
if (!this.ths[this.sortRows[l - 1]])
throw new Error('index out of range');/*列不存在*/
for (var i = 0, current = null, rowIndex = -1; i < l; i++) {
rowIndex = this.sortRows ? this.sortRows[i] : i;
current = this.ths[rowIndex];
current.onclick = this.getFunc(this, 'sort', rowIndex);
current.style.cursor = "pointer";
this.orderRule[rowIndex] = false;/*默认倒序*/
}
},
getFunc: function(variable, method, param) {
return function() {
variable[method](param);
}
},
sort: function(rowIndex) {
var me = this;
this.rows = this.rows.sort(function(a, b) {
a = a.cells[rowIndex].innerHTML;/*列内容*/
b = b.cells[rowIndex].innerHTML;
a = isNaN(a) ? a : parseFloat(a);/*判断是否为数字再决定转换*/
b = isNaN(b) ? b : parseFloat(b);
var order = a < b;
if (me.orderRule[rowIndex])
order = !order;/*与本列上一次排序方向相反*/
return order ? 1 : -1;
});
this.addStyle(rowIndex);
this.lastSorted = this.ths[rowIndex];/*设置最后一次被排序的列为当前列*/
this.orderRule[rowIndex] = !this.orderRule[rowIndex];/*改变下次本列排序方向*/
var _frag = document.createDocumentFragment();/*创建文档碎片，这样只需调用一次appendChild*/
for (var i = 0, l = this.rows.length; i < l; i++)
_frag.appendChild(this.rows[i]);
this.el.tBodies[0].appendChild(_frag);/*此时的appendChild只是移动原有行位置*/
if (this.sortcallback)
this.sortcallback(this.ths[rowIndex], this.orderRule[rowIndex]);
},
addStyle: function(rowIndex) {
if (this.lastSorted)
this.lastSorted.style.background = '';/*清除最后一次被点击的(标题列？)样式*/
this.ths[rowIndex].style.background = this.orderRule[rowIndex] ? 'red' : 'blue';
}
}
var tsort = new tableSorter({
el:'tbsort',
sortRows:[0,2,3,5,6],
sortcallback:function(row, asc) {/*row: tablerow, asc: Boolean*/
}
});
</script>
能不能加个功能，比如单击一行返回当前行的记录！！！！！
在AJAX没有流行之前
当朋友说到JS时,"不屑一顾"
现在...
哎,精通JS的是"国宝了"
我的email wmj2212@126.com
请多指教
@王孟军!
我也只是菜鸟一个,呵呵,有时间多多交流.
@smile^_^
@火无极
同学
@chenqz
谢谢
@GerryLiang
@jisen007
谢谢两位夸奖.