javascript 利用Array的sort方法，对Array进行排序（Array里面放的是对象而不是字符串）

最新推荐文章于 2022-09-01 08:46:16 发布

luyang1016

最新推荐文章于 2022-09-01 08:46:16 发布

阅读量6.8k

点赞数 1

分类专栏： html5+jquery+css3 文章标签： javascript function jquery div class html

本文链接：https://blog.csdn.net/luyang1016/article/details/7287054

版权

html5+jquery+css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

利用Array的sort方法，对Array进行排序（Array里面放的是对象而不是字符串）。

写了一个sample程序。

使用了jquery做了一下页面的处理，乱七八糟一大堆，其实真正有用的代码也就那么几句话。

这篇文章没什么技术含量，仅仅是自己做一个试验，并留作备忘。

（程序是可以跑得，只要引入一个jquery-1.6.2.js的包就可以了。）

而且css写的也稍微有点儿乱，这个大家看看就可以了，css不太值得借鉴！ ^ - ^

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <script src="./js/jquery-1.6.2.js"></script>    
    <title>数组的sort</title>
    <style>
    .studentinfo ul{
        list-style: none outside none;
    }
    .studentinfo li{
        clear:both;
        height:30px;
    }
    .studentinfo li span{
        width:100px;
        display:block;
        float:left;
        border:solid 1px;
        height:100%;
    }
    .infotitle span{
        background-color:yellow;
        border-color: transparent #FFFFFF transparent transparent;     
        text-align:center;    
        height:100%;
    }
    .infotitle span div{
       height:100%;
       margin-top:5px;
    }
    .upicon{
       height:0;
       width:0;
       border-bottom:10px solid orange;
       border-left:10px solid transparent;
       border-right:10px solid transparent;
       margin-top:3px;
       margin-left:2px;
       position:absolute;
    }
    .downicon{
       height:0;
       width:0;
       border-top:10px solid orange;
       border-left:10px solid transparent;
       border-right:10px solid transparent;
       margin-top:3px;
       margin-left:2px;
       position:absolute;
    }
    </style>

    <script>     
    // 定义一个学生类
    var Student = function() {
       this.name;
       this.age;
       this.score;
    }; 
    
    // 将学生类压入到待排序的数组中去。
    var objArray = new Array();
    var student = new Student();
    student.name = "AAA";
    student.age = 16;
    student.score = 98;
    objArray.push(student);
    
    student = new Student();
    student.name = "BBB";
    student.age = 14;
    student.score = 92;
    objArray.push(student);
    
    student = new Student();
    student.name = "CCC";
    student.age = 17;
    student.score = 96;
    objArray.push(student);
    
    // 通过jquery加载画面
    $(function(){
        // 设置初始值
        for (var i = 0; i < objArray.length; i++) {
            $('.studentinfo ul').append($('<li><span>' + objArray[i].name+'</span><span>' + objArray[i].age +'</span><span>' +  objArray[i].score + '</span></li>'));
        }
        
        // 按下排序按钮之后
        $('.infotitle span').each(function() {
            $(this).click(function() {
                
                // 三角形箭头去掉
                $('.infotitle b').removeClass('upicon').removeClass('downicon');
                $('.infotitle div').css('margin-left','0px');
                var sortColum = $(this).attr('id');
                var updown = 1;
                // 如果本次选择的排序列和前一次选择的不一样
                if ($('.studentinfo').attr('sortColum') != sortColum) {
                    // 捆绑当前排序列
                    $('.studentinfo').attr('sortColum', sortColum);
                    // 捆绑当前升降序区分（升序）
                    $('.studentinfo').attr('updown', 1);
                // 如果本次选择的排序列和前一次选择的一样
                } else {
                    updown = $('.studentinfo').attr('updown');
                    updown = parseInt(updown, 10) * -1; 
                    //捆绑当前升降序区分（将升序降序对调一下）
                    $('.studentinfo').attr('updown', updown);
                }
                
                // 加上向上向下的箭头
                if (updown == 1) {
                    $(this).find('b').addClass('upicon');
                } else {
                    $(this).find('b').addClass('downicon');
                }
                $(this).find('div').css('margin-left','-10px');
                // 真正的排序算法
                objArray = SortArray.sort(sortColum, updown, objArray);
                
                // 重新设置排序之后的值
                $('.studentinfo li:gt(0)').remove();
                for (var i = 0; i < objArray.length; i++) {
                    $('.studentinfo ul').append($('<li><span>' + objArray[i].name+'</span><span>' + objArray[i].age +'</span><span>' +  objArray[i].score + '</span></li>'));
                }
            })
        })
    });  
    
    // 排序类
    var SortArray = function(){
    };
    // 排序方法
    // sortColum 当前排序列
    // updown 升降序区分
    // 需要排序的对象数组
    SortArray.sort = function(sortColum, updown, objArray) {

        return objArray.sort(sortproc);
        
        // 排序内部处理
        function sortproc(a, b) {
            switch(sortColum) {
                case "name" :
                    return strcmp(a.name,b.name) * updown;
                case "age" :
                    return (a.age - b.age) * updown;
                case "score" :
                    return (a.score - b.score) * updown;
            }
        }
        
        // 字符串比较大小
        function strcmp ( str1, str2 ) {
            return ( ( str1 == str2 ) ? 0 : ( ( str1 > str2 ) ? 1 : -1 ) );
        }
    }; 
    </script>  
</head>  
  
<body>  
    <section class="studentinfo">
        <ul>
            <li class="infotitle"><span id="name"><div><label>姓名</label><b></b></div></span><span id="age"><div><tt>年龄</tt><b></b></div></span><span id="score"><div><tt>得分</tt><b></b></div></span></li>
        </ul>
    </section>
</body>  
</html>

运行结果如下图：

luyang1016

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript 利用Array的sort方法，对Array进行排序（Array里面放的是对象而不是字符串）

利用Array的sort方法，对Array进行排序（Array里面放的是对象而不是字符串）。写了一个sample程序。使用了jquery做了一下页面的处理，乱七八糟一大堆，其实真正有用的代码也就那么几句话。这篇文章没什么技术含量，仅仅是自己做一个试验，并留作备忘。（程序是可以跑得，只要引入一个jquery-1.6.2.js的包就可以了。）而且css写的也稍微有点儿乱，
复制链接

扫一扫