Question

我有以下代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<style>
.content{
        border: 1px solid gray;
        width: 250px; 
        padding: 5px; 
        margin : 10px;
      }

      .name{                
        font-size: 18px;
        font-weight: 600;
        color: #efa520;
        padding: 2px;
      }

      .ids{
        padding: 2px;
        color: #1b8ac1;            
      }
</style>

</head>

<body>
<span>Sort By :</span>
<span>
<select id="sortBy" style="width:80px;" onchange="sortEmp();">
<option value="id">Id
<option value="name">Name
</select>
</span>

<div class="container">
</div>

<script>

var data = {"employees": [
{"208880097" :{"name":"John Doe"}},
{"219087644" : {"name":"Anna Smith"}},
{"980017672" : {"name":"Peter Jones"}},
{"203459867" : {"name":"Christopher Brown"}}
]};

var empData = data.employees;
for(var empId in empData){
  var empInfo = empData[empId];
  for(var id in empInfo){

      var info = empInfo[id];

      var name = info.name;        
      $(".container").append('<div class="content"><span class="name">'+name+'</span><br><span class="ids">'+id+'</span><br></div>')

  }
}

function sortEmp(){
  var sort = $("#sortBy").val();
  if(sort == "name"){
    sortByName();
  }else{
    sortById();
  }
}

</script>

</body>
</html>

所以我想在更改选择选项时根据id或名称对这些信息进行排序，并根据视图中显示的显示数据进行排序。

顶部有一个选项'Sort By'，因此在更改select选项'sortEmp（）'后，函数将被调用，并且将完成排序。所以请帮助我。

Answer 1

我写了这个方法，它会对你的数据进行排序

function sortEmployees(asc, resolver) {
  empData = empData.sort(function(a, b) {
    a = resolver(a), b = resolver(b)
    if (asc) return (a > b) ? 1 : ((a < b) ? -1 : 0)
    else return (b > a) ? 1 : ((b< a) ? -1 : 0)
  }) 
}

第一个参数true或false设置升序或降序。

第二个参数是一个函数（在我的例子中，为了便于使用，一个lamda），这个函数必须返回列表应该被排序的属性。

// sort by id -  `Object.keys(o)[0]`  returns the id
sortEmployees(true, o => Object.keys(o)[0] )

// sort by name-  `o[Object.keys(o)[0]].name`  returns the name
sortEmployees(true, o => o[Object.keys(o)[0]].name )

实施例

var data = {
  "employees": [{
    "208880097": {
      "name": "John Doe"
    }
  }, {
    "219087644": {
      "name": "Anna Smith"
    }
  }, {
    "980017672": {
      "name": "Peter Jones"
    }
  }, {
    "203459867": {
      "name": "Christopher Brown"
    }
  }]
}

var empData = data.employees;

function displayEmployees() {

  $(".container").html('')

  for (var empId in empData) {
    var empInfo = empData[empId];
    for (var id in empInfo) {

      var info = empInfo[id];

      var name = info.name;
      $(".container").append('<div class="content"><span class="name">' + name + '</span><br><span class="ids">' + id + '</span><br></div>')

    }
  }

}

function sortEmp() {
  var sort = $("#sortBy").val()
  if (sort == "name") {

    sortEmployees(true, o => o[Object.keys(o)[0]].name )
    displayEmployees()

  } else {

    sortEmployees(true, o => Object.keys(o)[0] )
    displayEmployees()
  }
}

function sortEmployees(asc, resolver) {
  empData = empData.sort(function(a, b) {
    a = resolver(a), b = resolver(b)
    if (asc) return (a > b) ? 1 : ((a < b) ? -1 : 0)
    else return (b > a) ? 1 : ((b< a) ? -1 : 0)
  }) 
}

sortEmp()

.content {
  border: 1px solid gray;
  width: 250px;
  padding: 5px;
  margin: 10px;
}

.name {
  font-size: 18px;
  font-weight: 600;
  color: #efa520;
  padding: 2px;
}

.ids {
  padding: 2px;
  color: #1b8ac1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<span>Sort By :</span>
<span>
<select id="sortBy" style="width:80px;" onchange="sortEmp();">
<option value="id">Id
<option value="name">Name
</select>
</span>

<div class="container">
</div>

按ID或按名称对以下信息进行排序并显示

1 个答案:

实施例