按值sortingJSON
我有一个非常简单的JSON对象，如下所示：
{ "people":[ { "f_name":"john", "l_name":"doe", "sequence":"0", "title":"president", "url":"google.com", "color":"333333" }, { "f_name":"michael", "l_name":"goodyear", "sequence":"0", "title":"general manager", "url":"google.com", "color":"333333" } ] } 现在，这是从我的服务器端代码返回，我运行jQuery.each形成必要的HTML并输出结果。
现在我正在做的是发送一个AJAX调用服务器，包含我的sorting信息…例如“Title DESC”，并重新运行SQL查询返回新的结果集。 但我想避免这种情况，并使用jQuerysorting生成的JSON，以防止往返服务器和多个数据库访问。
我怎样才能实现这个使用jQuery？
试试这个优雅和效率。
jQuery很好，但在这里sorting并不理想，除非你没有原始数组。 只需编写一个函数，将属性名称作为string，并将其顺序（升序或降序）作为布尔值，编写一个简单的比较函数，并使用本地js sort（）函数。 这样你不必为每个属性编写一个单独的sorting函数：
var people = [ { "f_name": "john", "l_name": "doe", "sequence": "0", "title" : "president", "url" : "google.com", "color" : "333333", } // etc ]; function sortResults(prop, asc) { people = people.sort(function(a, b) { if (asc) { return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0); } else { return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0); } }); showResults(); }
然后：
sortResults('l_name', true);
在这里玩一个实例。
演示： http : //jsfiddle.net/VAKrE/1019/
成功传递相同的值（保持相同的顺序）。 灵活：处理上升（123）或下降（321），适用于数字，字母和unicodes。 适用于所有testing过的设备（Chrome，Android默认浏览器，FF）。
鉴于这样的数据 ：
var people = [ { 'myKey': 'A', 'status': 0 }, { 'myKey': 'B', 'status': 3 }, { 'myKey': 'C', 'status': 3 }, { 'myKey': 'D', 'status': 2 }, { 'myKey': 'E', 'status': 7 }, ... ];
按升序或倒序sorting ：
function sortJSON(data, key, way) { return data.sort(function(a, b) { var x = a[key]; var y = b[key]; if (way === '123' ) { return ((x < y) ? -1 : ((x > y) ? 1 : 0)); } if (way === '321') { return ((x > y) ? -1 : ((x < y) ? 1 : 0)); } }); } people2 = sortJSON(people,'status', '321'); // 123 or 321 alert("2. After processing (0 to x if 123; x to 0 if 321): "+JSON.stringify(people2));
jQuery.fn.sort = function() { return this.pushStack( [].sort.apply( this, arguments ), []); }; function sortLastName(a,b){ if (a.l_name == b.l_name){ return 0; } return a.l_name> b.l_name ? 1 : -1; }; function sortLastNameDesc(a,b){ return sortLastName(a,b) * -1; }; var people= [ { "f_name": "john", "l_name": "doe", "sequence": "0", "title" : "president", "url" : "google.com", "color" : "333333", }, { "f_name": "michael", "l_name": "goodyear", "sequence": "0", "title" : "general manager", "url" : "google.com", "color" : "333333", }] sorted=$(people).sort(sortLastNameDesc);
如果你不介意使用外部库， Lodash有很多很棒的工具
var people = [ { "f_name":"john", "l_name":"doe", "sequence":"0", "title":"president", "url":"google.com", "color":"333333" }, { "f_name":"michael", "l_name":"goodyear", "sequence":"0", "title":"general manager", "url":"google.com", "color":"333333" } ]; var sorted = _.sortBy(people, "l_name")
您也可以按多个属性进行sorting。 这是一个显示它在行动中的普及
解决scheme适用于不同types的大小写。
例如，如果没有toLowerCase声明，“Goodyear”会以“upe”的方式出现在“doe”之前。 运行我的答案底部的代码片段来查看不同的行为。
JSON数据：
var people = [ { "f_name" : "john", "l_name" : "doe", // lower case "sequence": 0 // int }, { "f_name" : "michael", "l_name" : "Goodyear", // upper case "sequence" : 1 // int }];
JSONsortingfunction：
function sortJson(element, prop, propType, asc) { switch (propType) { case "int": element = element.sort(function (a, b) { if (asc) { return (parseInt(a[prop]) > parseInt(b[prop])) ? 1 : ((parseInt(a[prop]) < parseInt(b[prop])) ? -1 : 0); } else { return (parseInt(b[prop]) > parseInt(a[prop])) ? 1 : ((parseInt(b[prop]) < parseInt(a[prop])) ? -1 : 0); } }); break; default: element = element.sort(function (a, b) { if (asc) { return (a[prop].toLowerCase() > b[prop].toLowerCase()) ? 1 : ((a[prop].toLowerCase() < b[prop].toLowerCase()) ? -1 : 0); } else { return (b[prop].toLowerCase() > a[prop].toLowerCase()) ? 1 : ((b[prop].toLowerCase() < a[prop].toLowerCase()) ? -1 : 0); } }); } }
用法：
sortJson(people , "l_name", "string", true); sortJson(people , "sequence", "int", true);
var people = [{ "f_name": "john", "l_name": "doe", "sequence": 0 }, { "f_name": "michael", "l_name": "Goodyear", "sequence": 1 }, { "f_name": "bill", "l_name": "Johnson", "sequence": 4 }, { "f_name": "will", "l_name": "malone", "sequence": 2 }, { "f_name": "tim", "l_name": "Allen", "sequence": 3 }]; function sortJsonLcase(element, prop, asc) { element = element.sort(function(a, b) { if (asc) { return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0); } else { return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0); } }); } function sortJson(element, prop, propType, asc) { switch (propType) { case "int": element = element.sort(function(a, b) { if (asc) { return (parseInt(a[prop]) > parseInt(b[prop])) ? 1 : ((parseInt(a[prop]) < parseInt(b[prop])) ? -1 : 0); } else { return (parseInt(b[prop]) > parseInt(a[prop])) ? 1 : ((parseInt(b[prop]) < parseInt(a[prop])) ? -1 : 0); } }); break; default: element = element.sort(function(a, b) { if (asc) { return (a[prop].toLowerCase() > b[prop].toLowerCase()) ? 1 : ((a[prop].toLowerCase() < b[prop].toLowerCase()) ? -1 : 0); } else { return (b[prop].toLowerCase() > a[prop].toLowerCase()) ? 1 : ((b[prop].toLowerCase() < a[prop].toLowerCase()) ? -1 : 0); } }); } } function sortJsonString() { sortJson(people, 'l_name', 'string', $("#chkAscString").prop("checked")); display(); } function sortJsonInt() { sortJson(people, 'sequence', 'int', $("#chkAscInt").prop("checked")); display(); } function sortJsonUL() { sortJsonLcase(people, 'l_name', $('#chkAsc').prop('checked')); display(); } function display() { $("#data").empty(); $(people).each(function() { $("#data").append("<div class='people'>" + this.l_name + "</div><div class='people'>" + this.f_name + "</div><div class='people'>" + this.sequence + "</div><br />"); }); }
body { font-family: Arial; } .people { display: inline-block; width: 100px; border: 1px dotted black; padding: 5px; margin: 5px; } .buttons { border: 1px solid black; padding: 5px; margin: 5px; float: left; width: 20%; } ul { margin: 5px 0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons" style="background-color: rgba(240, 255, 189, 1);"> Sort the JSON array <strong style="color: red;">with</strong> toLowerCase: <ul> <li>Type: string</li> <li>Property: lastname</li> </ul> <button onclick="sortJsonString(); return false;">Sort JSON</button> Asc Sort <input id="chkAscString" type="checkbox" checked="checked" /> </div> <div class="buttons" style="background-color: rgba(255, 214, 215, 1);"> Sort the JSON array <strong style="color: red;">without</strong> toLowerCase: <ul> <li>Type: string</li> <li>Property: lastname</li> </ul> <button onclick="sortJsonUL(); return false;">Sort JSON</button> Asc Sort <input id="chkAsc" type="checkbox" checked="checked" /> </div> <div class="buttons" style="background-color: rgba(240, 255, 189, 1);"> Sort the JSON array: <ul> <li>Type: int</li> <li>Property: sequence</li> </ul> <button onclick="sortJsonInt(); return false;">Sort JSON</button> Asc Sort <input id="chkAscInt" type="checkbox" checked="checked" /> </div> <br /> <br /> <div id="data" style="float: left; border: 1px solid black; width: 60%; margin: 5px;">Data</div>
这是一个多级sorting方法。 我包含了一个Angular JS模块的代码片段，但是您可以通过对sorting键对象进行作用域来完成同样的事情，以便您的sortingfunction可以访问它们。 你可以在Plunker看到完整的模块。
$scope.sortMyData = function (a, b) { var retVal = 0, key; for (var i = 0; i < $scope.sortKeys.length; i++) { if (retVal !== 0) { break; } else { key = $scope.sortKeys[i]; if ('asc' === key.direction) { retVal = (a[key.field] < b[key.field]) ? -1 : (a[key.field] > b[key.field]) ? 1 : 0; } else { retVal = (a[key.field] < b[key.field]) ? 1 : (a[key.field] > b[key.field]) ? -1 : 0; } } } return retVal; };
