簡體   English   中英

根據所選的選擇下拉列值對多行(從JSON填充)進行排序

[英]Sorting of multiple rows (being populated from JSON) based on the select dropdown value selected

我有多行從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是默認值時,不應該進行排序

任何人都可以讓我知道我做錯了什么,因為頁面中沒有發生排序。

謝謝。

似乎對我有用。 是一個示例小提琴,顯示了排序數據的簡單字符串。 我剛剛添加了一個觸發器,以便在下拉列表中的值更改時重新填充

$("#custom-dropdown").on("change", function() {
  populate(this.value);
});
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總是通過引用傳遞。 所以我克隆了數組並返回。 在“結束日期”中的下一個條件,條件箭頭必須在相反的方向上以相反的方向排序。 休息排序工作正常。 Ckeckout這個工作jsfiddle: https ://jsfiddle.net/a9vsfrbx/8/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM