今天发现有人写了一个可以静态对内容进行排序的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;width: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>

转载于:https://www.cnblogs.com/see7di/archive/2011/07/28/2239672.html

可以对任意有规律可循的静态内容进行排序的Jquery插件相关推荐

  1. 程序员的成功是否有规律可循？

    摘要:自然界中存在许多规律,那么在程序人生上是否有规律可循呢?这种规律是如大多数人期望的那样吗?V众投发起人李智勇对此进行了探讨,他分析了必然与偶然.本质与细节,并就程序人生规律的三要素进行了解读. ...

  2. jquery 插件 任意位置浮动固定层

    -------------------------------------jquery.floatDiv.js--------------------------------------------- ...

  3. JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友

    JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03     我来说两句       收藏    我要投稿 引入下方的jquery.rotate.js文件,然后通过 ...

  4. python彩票算法_彩票有规律可循吗？

    1.版路走势法:根据开奖号码的版路规律来选码,相信事物巧合的存在.两段相同或相似的版路只是一种偶然事件,并不代表会再次重复出现.版路走势法实质上也是碰概率,等同于一条公式,但比公式更直观更合理. 2. ...

  5. JQuery插件让图片旋转任意角度且代码极其简单

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...

  6. windows文件读取 xxe_XXE任意文件读取（当xml解析内容有输出时）

    利用XXE漏洞读取文件 参考:https://www.jianshu.com/p/4fc721398e97 首先找到登录源码如下: 由题目可以利用XXE漏洞读取文件 先登录用Burp Suite抓包: ...

  7. Spring Boot实现任意位置的properties及yml文件内容配置与获取

    〇.参考资料 1.Spring Boot 中文乱码问题解决方案汇总 https://blog.51cto.com/u_15236724/5372824 2.spring boot读取自定义配置prop ...

  8. 让弹幕飞一会儿——腾讯视频弹幕(39W+)爬取实战

    作者 | 周志鹏 来源 | 数据不吹牛 本文以腾讯视频(都挺好)为例,解析弹幕爬取的细节和难点,对思路感兴趣的旁友们可以跟着文章逻辑走一遍,对于想直接上手爬的同学,文末已给出完整代码. 相对于一般电影 ...

  9. 立可得_第1章_物联网亿万级通信一站式解决方案EMQ

    立可得_第1章_物联网亿万级通信一站式解决方案EMQ 文章目录 立可得_第1章_物联网亿万级通信一站式解决方案EMQ 物联网亿万级通信一站式解决方案EMQ 1. MQTT 1.1 MQTT简介 1.1 ...

最新文章

  1. thinkphp 5.0.3 rce getshell_关于ThinkPHP的一些渗透方式
  2. 基于托管C++的增删改查及异步回调小程序
  3. Linux 中 awk命令应用
  4. python命令窗口中怎么导入numpy_科学网—windows7下python3.6如何导入numpy，Astropy - 杨涛只的博文...
  5. Spark源码阅读环境搭建
  6. Appium连接教程
  7. ERP 集成常见的类型
  8. ui设计app设计风格有哪些？ui设计app界面设计流程是什么？
  9. Oracle SQL脚本批量导入导出
  10. 计算机里的硬盘分区,Disk Genius对电脑硬盘分区的详细步骤
  11. 易语言解析网页内容替换换行符问题
  12. 双十一适合买什么，缓解失眠助眠好物推荐榜
  13. LumaQQ在Linux下的安装和卸载
  14. ES6 Proxy 和 Reflect 的理解
  15. Win32-API: 终于能正常的捕获焦点事件: WM_COMMAND、BN_SETFOCUS、EN_SETFOCUS
  16. 编程微刊第八期文章汇总（2018.8）
  17. 高管股权激励的最优设计方案
  18. 微软tfs项目管理工具_使用微软的TFS云服务来管理小型项目
  19. 在一个国家仅有1分，2分，5分硬币，将n（n=5）分钱兑换成硬币有很多种兑法。请你编程序计算出10分钱共有多少种兑法，并列出每种兑换方式。
  20. 光伏数据采集分析系统

热门文章

  1. RTOS实时操作系统的认识
  2. 从Word文档中提取嵌入对象
  3. Endnote无法通过在线数据库添加文献， “未找到匹配文献”
  4. 探索创客教育在线管理实施体系
  5. 为什么无线电通信要将低频信号调制到高频传输？
  6. New Concept English Two 29 79
  7. 蓝桥杯算法:斐波那契求Fn除以10007的余数
  8. 浅谈Linux下的媒体播放器(转)
  9. 解决html访问本地数据时出现的跨域问题
  10. 条码软件中如何在边框上添加文字