基于HTML选择下拉列表的数据动态排序

Question

我试图根据用户选择的选项动态地对JavaScript对象中的数据进行排序。如果用户选择ID，则如果您切换，数据应该按照ID进行排序，并按名称和来回排序。卡住，因为创建了一个函数，并附加了一个onchange方法的选择，但它显然不工作。有人能帮忙吗？另外，我面临的主要问题是如何自定义选项元素。

//sorting based on selection which is the issue

function sorting() {
var my_options = $("#sort option");
var selected = $("#sort").val();

my_options.sort(function(a, b) {
  if (a.text > b.text) return 1;
  if (a.text < b.text) return -1;
  return 0
  })
$("#sort").empty().append(my_options);
$("#sort").val(selected);
}

小提琴

Answer 1

(至少)有两种方法来解决这个问题：

1. 对原始数据进行排序，然后从结果中重建HTML --这可能会导致更整洁的JavaScript。
2. 对DOM元素进行排序--这可能会更快。

下面实现了选项1。

• 我做的第一件事是使用.map()和Object.keys()将原始对象转换为一个雇员数组。这样就可以使用.sort()方法。
• 我对创建HTML的代码做了一些小的修改，以便它能够与employee对象的新数组一起工作，并将其放入一个函数中，以便可以从排序更改处理程序中调用它。
• 实际排序将在任何雇员属性上工作，其中ID使用数字排序，否则它将执行基于文本的排序(基于文本的排序甚至在日期上工作，因为YYYY DD格式)。

​

var employeesById = {
  "8110923": { "Name": "John Glanton", "Position": "Chief Executive", "Hire Date": "2008-01-15" },
  "7734981": { "Name": "Samuel Chamberlain", "Position": "Sales", "Hire Date": "2012-05-01" },
  "3400981": { "Name": "Louis Toadvine", "Position": "Customer Support", "Hire Date": "2011-08-24" },
  "5517823": { "Name": "Ben Tobin", "Position": "Developer", "Hire Date": "2013-03-19" },
  "4587234": { "Name": "David Brown", "Position": "Director of HR", "Hire Date": "2012-01-10" }
};

var employeesArray = Object.keys(employeesById).map(function(v) {
  return $.extend({ ID: v }, employeesById[v]);
});

displayData(employeesArray); // initial display of data

function displayData(employees) {
  var wrapper = $('#employees').empty();
  employees.forEach(function(employee) {
    var empDiv = $('<div class="employee"></div>');
    wrapper.append(empDiv);
    empDiv.append('<span class="name">' + employee.Name + ' ' + '</span>');
    empDiv.append('<span class="position">' + employee.Position + ' ' + '</span>');
    empDiv.append('<span class="hireDate">' + employee['Hire Date'] + ' ' + '</span>');
    empDiv.append('<span class="id">' + employee.ID + ' ' + '</span>');
  });
}

$("#sort").on("change", function() {
  var field = this.value;
  if (field === "ID")
    employeesArray.sort(function(a,b) {
      return a[field] - b[field];
    });
  else
    employeesArray.sort(function(a,b) {
      return a[field].localeCompare(b[field]);
    });
  displayData(employeesArray);
});

.control { padding-bottom: 4px; }
.employees { width: 300px; margin-left: 12px; }
.employee { border: 1px solid black; padding: 4px 4px 4px 4px; margin-bottom: 8px; }
.employee .name { font-size: 14pt; }
.employee .position { display: block; }
.employee .hireDate { display: block; font-size: 10pt; }
.employee .id { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="controls">
  <div class="control">Search:
    <input type="text" name="search" id="search" />
  </div>
  <div class="control">Sort:
    <select name="sort" id="sort">
      <option value="Name">Name</option>
      <option value="Hire Date">Hire Date</option>
      <option value="Position">Position</option>
      <option value="ID">ID</option>
    </select>
  </div>
</div>
<div id="employees"></div>

​

注意，选项元素应该具有value属性，而不是name属性。

Answer 2

这里是 Live Searching和Sorting的另一个答案

​

var employeesById = {
  "8110923": {"Name": "John Glanton","Position": "Chief Executive","Hire Date": "2008-01-15"},
  "7734981": {"Name": "Samuel Chamberlain","Position": "Sales","Hire Date": "2012-05-01"},
  "3400981": {"Name": "Louis Toadvine","Position": "Customer Support","Hire Date": "2011-08-24"},
  "5517823": {"Name": "Ben Tobin","Position": "Developer","Hire Date": "2013-03-19"},
  "4587234": {"Name": "David Brown","Position": "Director of HR","Hire Date": "2012-01-10"}
};

var EmployeeArray = Object.keys(employeesById).map(function(v) {
  return $.extend({ ID: v }, employeesById[v]);
});

display(EmployeeArray);  /*Display All EmployeeArray data */

function sorting(EmpData,SearchString='',SortBy='ID'){
  switch(SortBy){

    case 'ID'   : 
      EmpData.sort(function(a,b) {
        return a.ID > b.ID;  /*Sort By ID*/
      });
    break;

    case 'Name' :
      EmpData.sort(function(a,b) {
        return a.Name.localeCompare(b.Name);  /*Sort By Name*/
      });
    break;

    case 'Position' :
      EmpData.sort(function(a,b) {
        return a.Position.localeCompare(b.Position);  /*Sort By Position*/
      });
    break;

    case 'Hire Date' :
      EmpData.sort(function(a,b) {
        return a["Hire Date"].localeCompare(b["Hire Date"]);  /*Sort By Hire Date*/
      });
    break;

    default     :
      /*Silent is golden*/
    break; 
  }

  return EmpData;
}

function searching(){
  var SearchString  = $('#search').val().toUpperCase();  /*Uppercase for Case Insentive*/
  var SortBy        = $('#sort').val();
  var Data          = sorting(EmployeeArray,SearchString,SortBy);
  var SearchData    = [];
  var index         = 0;
  var Name          = '';
  for(i=0; i<Data.length; i++){
    Name      = Data[i].Name.toUpperCase();  /*Uppercase for Case Insentive*/
    if (Name.indexOf(SearchString)>=0){  /*Search By Name*/
      SearchData[index++] = Data[i];
    }
  }
  display(SearchData);  /*Display Sorting Data*/
}

function display(Data){
  var html = '';
  for(var i=0; i<Data.length;i++){
    html+='<div class="employee">';
      html+='<p class="id">'+Data[i].ID+'</p>';
      html+='<p class="name">'+Data[i].Name+'</p>';
      html+='<p class="position">'+Data[i].Position+'</p>';
      html+='<p class="hireDate">'+Data[i]['Hire Date']+'</p>';
    html+='</div>';
  };
  $('#employees').html(html);
}

$('#search').keyup(function(){  /*Live Search, When Pressing any Keys*/
  searching();
});

$('#sort').change(function(){  /*Live Search, When Sort by*/
  searching();
});

body{
  margin: 0px;
  padding: 0px;
}
.employee {
  width: 96%;
  border: 1px solid black;
  padding: 5px;
  margin: 5px auto;
}
.employee p{
  padding: 0px;
  margin: 0px;
}
.employee .id {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="controls">
  <div class="control">Search:
    <input type="text" placeholder="Search by Name" id="search" />
  </div>
  <div class="control">Sort:
    <select id="sort">
      <option value="ID">ID</option>
      <option value="Name">Name</option>
      <option value="Position">Position</option>
      <option value="Hire Date">Hire Date</option>
    </select>
  </div>
</div>
<div id="employees"></div>

​

以下是indexOf()、localeCompare()、排序()、toUpperCase()、$.extend()的函数参考