javascript 利用Array的sort方法,对Array进行排序 (Array里面放的是对象而不是字符串)
2012-02-23 14:36
1031 查看
利用Array的sort方法,对Array进行排序 (Array里面放的是对象而不是字符串)。
写了一个sample程序。
使用了jquery做了一下页面的处理,乱七八糟一大堆,其实真正有用的代码也就那么几句话。
这篇文章没什么技术含量,仅仅是自己做一个试验,并留作备忘。
(程序是可以跑得,只要引入一个jquery-1.6.2.js的包就可以了。)
而且css写的也稍微有点儿乱,这个大家看看就可以了,css不太值得借鉴! ^ - ^
运行结果如下图:
写了一个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>
运行结果如下图:
相关文章推荐
- 使用Array的Sort()方法对数组进行排序
- 利用 Arrays.sort 字符串 进行排序 完全按字符 排序 忽略字符大小写
- JavaScript中数组Array.sort()排序方法详解
- iOS sort array 数组排序里面的对象
- JavaScript 使用 sort() 方法从数值上对数组进行排序
- javascript内置对象数组Array和字符串string的一些方法
- javascript中数组(Array)对象的方法和字符串(String)对象的方法
- 浅谈JavaScript--Array数组sort()排序方法与自定义比较器的使用
- 利用 Arrays.sort 字符串 进行排序 完全按字符 排序 忽略字符大小写
- JavaScript中用sort()方法对数组元素进行排序的操作
- JavaScript中prototype(原型)给字符串对象添加一个toCharArray的方法,reverse(翻转)的 方法
- Array.prototype.sort()对数组对象排序的方法
- 对集合中的对象进行排序,用collections.sort 到方法
- js sort方法根据数组中对象的某一个属性值进行排序
- js sort方法根据数组中对象的某一个属性值进行排序
- 用Array.Sort对字符串进行排序的问题
- 利用Arrays.sort(Array,Comparator)对数组进行排序
- 利用Sort()方法进行排序
- javascript中数组(Array)对象和字符串(String)对象的常用方法总结
- js使用Array.prototype.sort()对数组对象排序的方法