使用javascript对表的所有列进行排序的泛型函数

时间:2017-12-28 12:58:05

标签: javascript html angularjs sorting

我的控制器中有以下对象数组

$scope.records = [
    {
      "fName" : "Alfreds",
      "lName" : "Berglunds",
      "country" : "Germany",
      "age":21
    },
    {   
      "fName" : "Berglunds",
      "lName" : "Alfreds",
      "country" : "Sweden",
      "age":22
    },
    {      
      "fName" : "Centro",
      "lName" : "Ernst",
      "country" : "Mexico",
      "age":23
    },
    {      
      "fName" : "Ernst",
      "lName" : "Centro",
      "country" : "Austria",
      "age":24
    }
  ]

我使用上面的数组

在我的视图中填充表格
<table ng-controller="myCtrl" border="1">
  <th ng-click="sortByFirstName()">First Nmae</th>
  <th ng-click="sortByLastName()">Last Name</th>
  <th ng-click="sortByCountry()">Country</th>
  <th ng-click="sortByAge()">Age</th>

  <tr ng-repeat="x in records">
    <td>{{x.fName}}</td>
    <td>{{x.lName}}</td>
    <td>{{x.country}}</td>
    <td>{{x.age}}</td>
  </tr>
</table>

点击每个列标题后,我需要按升序对记录进行排序,然后再次点击它们应该按翻转顺序(降序)。现在我正在使用单独的函数对它们进行排序。任何人都可以建议更好的方法来实现相同的目标吗类似于使用泛型排序函数的东西

2 个答案:

答案 0 :(得分:2)

您可以将 generic function 作为参数传递给函数

,从而使用angularjs $ filter制作 sortBy

<强> DEMO

&#13;
&#13;
var app = angular.module('testApp',[])

app.controller('myCtrl',function($scope,$filter){
$scope.sortBy = function(sortBy){
    $scope.records = $filter('orderBy')($scope.records, sortBy);
}
$scope.records = [
    {
      "fName" : "Alfreds",
      "lName" : "Berglunds",
      "country" : "Germany",
      "age":21
    },
    {   
      "fName" : "Berglunds",
      "lName" : "Alfreds",
      "country" : "Sweden",
      "age":22
    },
    {      
      "fName" : "Centro",
      "lName" : "Ernst",
      "country" : "Mexico",
      "age":23
    },
    {      
      "fName" : "Ernst",
      "lName" : "Centro",
      "country" : "Austria",
      "age":24
    }
  ];
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<table ng-controller="myCtrl" border="1">
  <th ng-click="sortBy('fName')">First Nmae</th>
  <th ng-click="sortBy('lName')">Last Name</th>
  <th ng-click="sortBy('country')">Country</th>
  <th ng-click="sortBy('age')">Age</th>

  <tr ng-repeat="x in records">
    <td>{{x.fName}}</td>
    <td>{{x.lName}}</td>
    <td>{{x.country}}</td>
    <td>{{x.age}}</td>
  </tr>
</table>
</body>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

使用此通用if (@available(iOS 11.0, *)) { self.navigationItem.searchController = searchController; // ToDo : dont forget to hide the tableView // ... } else { self.tableView.tableHeaderView = searchController.searchBar; [self.tableView setContentOffset:CGPointMake(0,searchController.searchBar.bounds.size.height) animated:YES]; } 并将属性名称传递给它

sortBy

例如

var sortBy = ( prop ) => $scope.records.sort(  function( a, b ){
   return typeof a == "number" ? ( a[ prop ] - b[ prop ] ) : a[ prop ].localeCompare( b[ prop ] );
});