admin 发表于 2016-7-4 15:18:04

JS 对象数组Array 根据对象object key的值排序sort

JS 对象数组Array 根据对象object key的值排序sort

有个js对象数组 var ary=[{id:1,name:"b"},{id:2,name:"b"}] 需求是根据name 或者 id的值来排序
函数定义:function keysrt(key,desc) {
return function(a,b){
    return desc ? ~~(a < b) : ~~(a > b);
}
}
使用:var ary=[{id:1,name:"b"},{id:2,name:"b"}];
ary.sort(keysrt('name',true));
ary.sort(keysrt('name',false));
ary.sort(keysrt('id',false));
Demo Code:<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>demo</title>
</head>
<body>
<div id="element"></div>
<button onclick="paixu('name',0)">name 正序</button>
<button onclick="paixu('name',1)">name 倒序</button>
<button onclick="paixu('age',0)">age 正序</button>
<button onclick="paixu('age',1)">age 倒序</button>
<button onclick="paixu('time',0)">time 正序</button>
<button onclick="paixu('time',1)">time 倒序</button>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var DemoData= [
            {name:"A", age:12,"time":'2016年07月04 15:50:11'},
            {name:"B", age:90,"time":'2016年07月04 15:40:11'},
            {name:"C", age:13,"time":'2016年07月04 15:28:11'},
            {name:"D", age:24,"time":'2016年07月04 15:19:11'}
      ];

function KeySort(key,desc) { // KEY:需要排序的键名 desc:排序类型 true是从大到小 false是反之
    return function(a,b){
      return desc ? ~~(a < b) : ~~(a > b);
    }
}
function paixu(key,desc) {

    DemoData.sort(KeySort(key,desc));// 排序处理

// 输出排序后的结果
    var $text = "";
    $.each(DemoData, function (key, value) {
      var $div = "<div>";
      $.each(value, function (key, value) {
            $div += "<span>" + key + ":" + value + "</span>" + "         ";
      });
      $div += "</div>";
      $text = $text + $div;
    })
    $text += "";
    $("#element").html($text);

}
</script>
</body>
</html>


附加:两个对象数组,某一项永远置顶并且排序,Code:<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>demo</title>
<style type="text/css">
    .aa{background: #ccc;}
</style>
</head>
<body>
<div id="element"></div>
<button onclick="paixu('name',0)">name 正序</button>
<button onclick="paixu('name',1)">name 倒序</button>
<button onclick="paixu('age',0)">age 正序</button>
<button onclick="paixu('age',1)">age 倒序</button>
<button onclick="paixu('time',0)">time 正序</button>
<button onclick="paixu('time',1)">time 倒序</button>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var Data =[{
    "menufolder":[
    {"name":"A", "age":"12","time":"2016年07月04 15:50:11","type":"menufolder"},
    {"name":"B", "age":"90","time":"2016年07月04 15:40:11","type":"menufolder"},
    {"name":"C", "age":"13","time":"2016年07月04 15:28:11","type":"menufolder"},
    {"name":"D", "age":"24","time":"2016年07月04 15:19:11","type":"menufolder"}
    ],
    "menufile":[
    {"name":"A1", "age":"12","time":"2016年07月04 15:50:11","type":"menufile"},
    {"name":"B1", "age":"90","time":"2016年07月04 15:40:11","type":"menufile"},
    {"name":"C1", "age":"13","time":"2016年07月04 15:28:11","type":"menufile"},
    {"name":"D1", "age":"24","time":"2016年07月04 15:19:11","type":"menufile"}
    ]
}];
function KeySort(key,desc) { // KEY:需要排序的键名 desc:排序类型 true是从大到小 false是反之
    return function(a,b){
      return desc ? ~~(a < b) : ~~(a > b);
    }
}

function paixu(key,desc) {
    var a = Data.menufolder.sort(KeySort(key,desc));// 排序处理
    var b = Data.menufile.sort(KeySort(key,desc));// 排序处理
    var c=new Array();
    var d=c.concat(a,b);
    OutputHtml(d);
}

function OutputHtml(Data) {
    // 输出排序后的结果
    var $text = "";
    $.each(Data, function (key, value) {
      var $div = "<div>";
      if (key % 2 == 0) {
            var $div = "<div class=\"aa\">";
      }
      $.each(value, function (key, value) {
            $div += "<span>" + key + ":" + value + "</span>" + "         ";
      });
      $div += "</div>";
      $text = $text + $div;
    })
    $("#element").html($text);

}
paixu('name',0);
</script>
</body>
</html>

页: [1]
查看完整版本: JS 对象数组Array 根据对象object key的值排序sort