今天发现有人写了一个可以静态对内容进行排序的jquery插件,我测试了一下发现非常让人失望,因为他只能对最简单的table(div都不行)进行排序,哪怕是table稍微有点不对称就没办法了.鉴于此我决定重新开发一个功能更强的,先看下邊的演示效果吧.
上图中的六个按钮分别对应了按鈕下方的六列数据.
理论上讲只要是有规律可循的内容都能排序,我采用的核心思想就是js的sort函数,该函数要求被排序对象必须是Array,所以只要我们把那些需要排序的内容找出规律放入array就行了.不管对方的排版有多么混乱也不管需要排列的值是整数,浮点数,字符串或时间,只要有规律存在我们就能排序,听起来很玄乎哈,其实还好了,这可是我的大脑奋斗了一晚上的结晶.
或许有童鞋会问为什么不直接使用sql的order by来排序,其实原因很简单,那就是当我们在使用ajax多次载入同种类型的数据时order by无能为力.那为什么要ajax多次载入呢?为何不一次载入然后直接order by?想象一下如果你的列表内有几万乃至上百万条数据的时候吧!在这种状况下如果还是一次载入那实在让我没什么可说的了.恐怕你得让浏览你网站的人使用小型机或中型机了,因为PC已经是没有办法胜任了.或许还会有人问,既然这么多数据为何不分页呢?我的回答是既然你决定要分页那你还要用ajax干嘛.
下边的例子内包含插件的代码和六种不同的调用方式,另外请注意传值的方式,尤其是txt这个参数的传值方式分为两种模式,第一种模式是传递字符串型的数据,第二种模式是传递Array型的数据,另外还需要注意一下回调函数的使用.
好了我贴出代码来给大家看一下.欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
<!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 ulansitional//EN" "http://www.w3.org/ul/xhtml1/Dli/xhtml1-ulansitional.dli">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Order</title>
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="Order.js" type="text/javascript"></script>
<style type='text/css'>
body{
background-color:#FFF;
font-size:12px;
}
ul{clear:both;}
li{
list-style:none;float:left;14%;
}
.aa{
font-size:14px;color:blue;
}
</style>
<script type="text/javascript">
/*************************************************
说明:對有規律可循的列表內容進行排序
使用:
1、分別設置好三個參數bos;lst;txt
2、參照下邊的例子進行調用就行了
注意:
如果發現排序不准確,則說明你的三個參數設置有錯誤
**************************************************/
(function($){
$.Order=function(_opt){
var _use=false;
var _box=_opt.box; //盒子的抓取依據,需要排序的列表被包含在此容器內
var _lst=_opt.lst; //lst是即將要被重新排序的列表的抓取依據
var _txt=_opt.txt; //txt用來抓取排序參照值,如果很簡單則可以將該值設為字符串,如果比較複雜則建議你用Array,Array將被拆分為多層的children()來進行精確定位
//如果沒有排序進程則執行排序
if(!_use){
_use=true;by=_box.data('by');
_lst.sort(function Dosort(l1,l2){
if(_txt.constructor==window.Array){
var _tmp='';
for(i=0;i<_txt.length;i++){_tmp+='.children("'+_txt[i]+'")';}
var a='$.trim($(l1)'+_tmp+'.text())';
var b='$.trim($(l2)'+_tmp+'.text())';
_tmp=null;a=eval(a);b=eval(b);
}else{
var a=$.trim($(l1).children(_txt).text());
var b=$.trim($(l2).children(_txt).text());
}
if(a==b){return 0;}
var isDt=IsTime(a) && IsTime(b);
if(isDt){
var tim1=new Date(a.replace(/-/g,"/"));
var tim2=new Date(b.replace(/-/g,"/"));
if(tim1.getTime() > tim2.getTime()){
return (by=='up')?1:-1;
}else{
return (by=='up')?-1:1;
}
}else if(isNaN(a) || isNaN(b)){
return (by=='up')?a.localeCompare(b):b.localeCompare(a);
}else{
if(a-b > 0){
return (by=='up')?1:-1;
}else{
return (by=='up')?-1:1;
}
}
});
_box.append(_lst).data('by',(by=='up'?'':'up'));
CallBack();
_use=false;
}
//判斷內容是否為時間
function IsTime(dateString){
dateString=$.trim(dateString);
if(dateString==null && dateString.length==0){return false;}
dateString=dateString.replace(/\//g,"-");
var reg=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
var r=dateString.match(reg);
if(r==null){
var reg=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
var r=dateString.match(reg);
}
return r!=null;
}
//排序完成後的囘調函數
//返回:_box對象,_lst對象,_txt字符串或數組
function CallBack(){
if(_opt.end!=null){_opt.end(_box,_lst,_txt);}
}
}
})(jQuery)
$(function(){
$('#h1').click(function(){
$.Order({
//盒子的抓取依據,需要排序的列表被包含在此容器內
box:$('#d1'),
//lst是即將要被重新排序的列表的抓取依據
lst:$('#d1 ul'),
//txt用來抓取排序參照值,如果很簡單則可以將該值設為字符串,如果比較複雜則建議你用Array,Array將被拆分為多層的children()來進行精確定位
txt:new Array('li:eq(0)','span','strong','.aa'),
end:function(box,lst,txt){
alert(lst.selector+"內有"+lst.length+"個列表!\n "+lst.selector+"的內容是:\n"+lst.text());
alert('box的選擇器為:'+box.selector+'\nlst的選擇器為:'+lst.selector+'\ntxt的內容為:'+txt);
}
})
});
$('#h2').click(function(){
$.Order({
box:$('#d1'),
lst:$('#d1 ul'),
txt:'li:eq(1)',
end:function(box,lst,txt){
lst.children('li:nth-child(2)').css({'color':'blue','font-weight':'bold'});
}
})
});
$('#h3').click(function(){
$.Order({
box:$('#d1'),
lst:$('#d1 ul'),
txt:'li:eq(2)',
end:function(box,lst,txt){
lst.children('li:nth-child(3)').css('color','blue');
}
})
});
$('#h4').click(function(){
$.Order({
box:$('#d1'),
lst:$('#d1 ul'),
txt:'li:eq(3)',
end:function(box,lst,txt){
alert('box的選擇器為:'+box.selector+'\nlst的選擇器為:'+lst.selector+'\ntxt的內容為:'+txt);
}
})
});
$('#h5').click(function(){
$.Order({
box:$('#d1'),
lst:$('#d1 ul'),
txt:'li:eq(4)',
})
});
$('#h6').click(function(){
$.Order({
box:$('#d1'),
lst:$('#d1 ul'),
txt:'li:eq(5)',
end:function(box,lst,txt){
lst.children('li:nth-child(5)').css('color','orange');
lst.children('li:nth-child(6)').prepend(">");
}
})
});
});
</script>
</head>
<body>
<fieldset>
<legend>Example</legend>
<input type='button' value='1' id='h1'>
<input type='button' value='2' id='h2'>
<input type='button' value='3' id='h3'>
<input type='button' value='4' id='h4'>
<input type='button' value='5' id='h5'>
<input type='button' value='6' id='h6'>
<div id="d1">
<ul>
<li><span>Id:<strong><span class='aa'>3</span></strong></span></li>
<li>0.811903307592451</li>
<li>2010-11-28 11:11:45</li>
<li>埃及</li>
<li>ff</li>
<li>222</li>
</ul>
<ul>
<li><span>順序:<strong><span class='aa'>1</span></strong></span></li>
<li>0.317953918742926</li>
<li>2011-6-23 11:11:45</li>
<li>a很強</li>
<li>dd</li>
<li>111</li>
</ul>
<ul>
<li><span>序號:<strong><span class='aa'>4</span></strong></span></li>
<li>0.893289602311929</li>
<li>2011-6-9 11:11:45</li>
<li>TVBS</li>
<li>aa</li>
<li>333</li>
</ul>
<ul>
<li><span>XH:<strong><span class='aa'>2</span></strong></span></li>
<li>0.936839872802068</li>
<li>2010-12-24 11:11:45</li>
<li>雅虎奇摩</li>
<li>bb</li>
<li>555</li>
</ul>
<ul>
<li><span>BH:<strong><span class='aa'>5</span></strong></span></li>
<li>0.176848827012279</li>
<li>2011-11-13 11:11:45</li>
<li>易居網</li>
<li>ee</li>
<li>444</li>
</ul>
<ul>
<li><span>編號:<strong><span class='aa'>6</span></strong></span></li>
<li>0.307295758885935</li>
<li>2011-1-20 11:11:45</li>
<li>埃1及</li>
<li>cc</li>
<li>000</li>
</ul>
</div>
</fieldset>
</body>
</html>