ng-sortable-table
/
test
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="../dist/css/ng-sortable-table.css" />
  <style media="screen">
    table {
      width: 520px;
    }
    table th,
    table td {
      text-align: center;
      border: 1px solid #CCC;
    }
  </style>
  <title>Sortable Table Test</title>
</head>
<body>
  <main id="main" ng-controller="AppController">
    <table sortable-table on-sort="onSort($attrName, $sortType, $event);">
      <thead>
        <tr>
          <th>序号</th>
          <th sortable-column="name">姓名</th>
          <th sortable-column="age">年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in list">
          <td ng-bind="$index+1"></td>
          <td ng-bind="item.name"></td>
          <td ng-bind="item.age"></td>
        </tr>
      </tbody>
    </table>
  </main>
  <script src="../lib/jquery/jquery.js" charset="utf-8" type="text/javascript"></script>
  <script src="../lib/angular/angular.js" charset="utf-8" type="text/javascript"></script>
  <script src="../dist/js/ng-sortable-table.module.js" charset="utf-8" type="text/javascript"></script>
  <script type="text/javascript">
    (function() {
      angular.module('app.module', ['sortable-table.module']).controller('AppController', [
        '$scope',
        function($scope) {
          $scope.list = [
            {
              name: '小A',
              age: 12,
            },
            {
              name: '小B',
              age: 13,
            },
            {
              name: '小C',
              age: 14,
            },
            {
              name: '小D',
              age: 15,
            },
            {
              name: '小E',
              age: 16,
            },
            {
              name: '小F',
              age: 17,
            }
          ];
          $scope.onSort = function(attrName, sortType, event) {
            var list = $scope.list.sort(function(a, b) {
              if(typeof a[attrName] === 'string') {
                return a[attrName].localeCompare(b[attrName]);
              } else if (typeof a[attrName] === 'number') {
                return a[attrName] - b[attrName];
              }
            });
            if(sortType === 'desc') {
              list = list.reverse();
            }
            $scope.list = list;
          };
        }
      ]);
      angular.bootstrap(document.querySelector('#main'), [
        'app.module',
      ]);
    }());
  </script>
</body>
</html>