根据所选的选择下拉列值对多行(从JSON填充)进行排序

时间:2016-08-12 12:04:16

标签: javascript jquery

我有多行从JSON填充。我正在使用每个循环进行迭代。我有一个带有四个值的选择下拉列表,其中一个是默认情况。我想根据从下拉列表中选择的值对行进行排序。例如 - 如果下拉值为'x',则使用JSON中的'y'键排序。当选择默认值时,页面应显示为原样

jsonData.jsonArray.sort(function(a, b) {
            if ($( "#custom-dropdown" ).val()=="Active") {
                return (b.status> a.status) ? 1 : ((a.status< b.status) ? -1 : 0);
            } else if ($( "#custom-dropdown" ).val()=="End date") {
                return (b.endDate > a.endDate) ? 1 : ((b.endDate < a.endDate) ? -1 : 0);
            } else if ($( "#custom-dropdown" ).val()=="Nearest end date"){
                return (b.endDate > a.endDate) ? 1 : ((b.endDate < a.endDate) ? -1 : 0);
            } else{
                return 0;
            }
        });

JSON -

 var jsonData={
  "status": "200", 
  "jsonArray": [
    {
      "startDate": "2014-05-27",,
      "status": "true",  
      "endDate": "2016-05-27",
    },
    {
      "startDate": "2012-05-27",,
      "status": "false",  
      "endDate": "2013-05-27",

    }
  ]

} 选择下拉结构 -

<div id="custom-dropdown">
             <select class="selectpicker">
                  <option data-divider="true">Default</option>
                  <option data-divider="true">Active</option>
                  <option data-divider="true">End date</option>
                  <option data-divider="true">Nearest end date</option>
            </select>
        </div>

注意:当选定的下拉值为活动时,则按状态排序。 2.当选定的下拉值为结束日期时,则按结束日期按升序排序 3.当下拉值接近结束日期时,则按结束日期降序排序。 4.当dropdon vale是默认值时,不应该进行排序

任何人都可以让我知道我做错了什么,因为页面中没有发生排序。

感谢。

1 个答案:

答案 0 :(得分:0)

var jsonData = {
   "status": "200",
   "jsonArray": [{
     "startDate": "2014-05-25",
     "status": "true",
     "endDate": "2016-05-25",
   }, {
     "startDate": "2012-05-26",
     "status": "false",
     "endDate": "2013-05-26",

   },{
     "startDate": "2014-05-27",
     "status": "true",
     "endDate": "2016-05-27",
   }]
   }

  var json_sort = function() {
  var newjsonArray  = jsonData.jsonArray.slice(0);
     var custom_dropdown = document.getElementById('custom-dropdown');
     return newjsonArray.sort(function(a, b) {
         switch (custom_dropdown.value) {
           case 'Active':
             return (b.status > a.status) ? 1 : ((a.status < b.status) ? -1 : 0);
             break;
           case "End date":
             return (b.endDate < a.endDate) ? 1 : ((b.endDate > a.endDate) ? -1 : 0);
             break;
           case "Nearest end date":
             return (b.endDate > a.endDate) ? 1 : ((b.endDate < a.endDate) ? -1 : 0);
             break;
           default:
             return 0;
         }
       });
     }

你有两个错误,第一个是你使用的是同一个数组,所以你的默认条件总是会失败。记住Javascript总是通过引用传递。所以我克隆了数组并返回。 &#34;结束日期&#34;中的下一个条件;条件箭头必须朝相反方向排序。休息排序工作正常。 Ckeckout这个工作jsfiddle:https://jsfiddle.net/a9vsfrbx/8/