68

4 つのテーブル ヘッダーがあります。

$scope.headers = ["Header1", "Header2", "Header3", "Header4"];

そして、ヘッダーをクリックしてテーブルをソートできるようにしたいと考えています。

私のテーブルがこのように見える場合

H1 | H2 | H3 | H4
A    H    D   etc....
B    G    C
C    F    B
D    E    A

そして私はクリックします

H2

私のテーブルは次のようになります。

H1 | H2 | H3 | H4
D    E    A   etc....
C    F    B
B    G    C
A    H    D

つまり、各列の内容は変更されませんが、列を並べ替えたいヘッダーをクリックすると、行が並べ替えられます。

私のテーブルのコンテンツは、Mojoliciousで行われたデータベース呼び出しによって作成され、ブラウザーに返されます。

$scope.results = angular.fromJson(data); // This works for me so far

まとめた残りのコードは次のようになります。

<table class= "table table-striped table-hover">
    <th ng-repeat= "header in headers">
        <a> {{headers[$index]}} </a>
    </th>
    <tr ng-repeat "result in results">
        <td> {{results.h1}} </td>
        <td> {{results.h2}} </td>
        <td> {{results.h3}} </td>
        <td> {{results.h4}} </td>
    </tr>
</table>

テーブルの上部にあるヘッダーをクリックするだけで、この時点から列を並べ替えるにはどうすればよいですか?

4

9 に答える 9

5

これはAngularJSでこれを行うのに役立つフィドルです
http://jsfiddle.net/patxy/D2FsZ/

<th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">
     {{th}}
</th>

次に、データについて次のようにします。

<tr ng:repeat="row in body.$orderBy(sort.column, sort.descending)">
    <td>{{row.a}}</td>
    <td>{{row.b}}</td>
    <td>{{row.c}}</td>
</tr>

AngularJS コントローラーでこのような関数を使用すると、次のようになります。

scope.sort = {
    column: 'b',
    descending: false
};

scope.selectedCls = function(column) {
    return column == scope.sort.column && 'sort-' + scope.sort.descending;
};

scope.changeSorting = function(column) {
    var sort = scope.sort;
    if (sort.column == column) {
        sort.descending = !sort.descending;
    } else {
        sort.column = column;
        sort.descending = false;
    }
};
于 2013-10-01T18:45:46.020 に答える
2

AngularJS でこれを行う別の方法は、グリッドを使用することです。

グリッドの利点は、探している行の並べ替え動作がデフォルトで含まれていることです。

機能はうまくカプセル化されています。ng-click 属性を追加したり、状態を維持するためにスコープ変数を使用したりする必要はありません。

    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>

コントローラーにグリッド オプションを追加するだけです。

  $scope.gridOptions = {
    data: 'myData.employees',
    columnDefs: [{
      field: 'firstName',
      displayName: 'First Name'
    }, {
      field: 'lastName',
      displayName: 'Last Name'
    }, {
      field: 'age',
      displayName: 'Age'
    }]
  };

完全な作業スニペットが添付されています:

var app = angular.module('myApp', ['ngGrid', 'ngAnimate']);
app.controller('MyCtrl', function($scope) {

  $scope.myData = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }, {
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    }, {
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };

  $scope.gridOptions = {
    data: 'myData.employees',
    columnDefs: [{
      field: 'firstName',
      displayName: 'First Name'
    }, {
      field: 'lastName',
      displayName: 'Last Name'
    }, {
      field: 'age',
      displayName: 'Age'
    }]
  };
});
/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px;
    height: 200px
}
<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-animate.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

于 2015-02-04T23:45:02.627 に答える
1

ヘッダーでソートする例を次に示します。このテーブルは動的で、JSON のサイズによって変化します。

他の人の例とドキュメントから動的テーブルを作成することができました。http://jsfiddle.net/lastlink/v7pszemn/1/

<tr>
    <th class="{{header}}" ng-repeat="(header, value) in items[0]" ng-click="changeSorting(header)">
    {{header}}
  <i ng-class="selectedCls2(header)"></i>
</tr>

<tbody>
    <tr ng-repeat="row in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
        <td ng-repeat="cell in row">
              {{cell}}
       </td>
    </tr>

列は順不同ですが、私の .NET プロジェクトでは順になっています。

于 2016-05-04T21:51:50.317 に答える
0

これを試して：

まずコントローラーを変える

    yourModuleName.controller("yourControllerName", function ($scope) {
        var list = [
            { H1:'A', H2:'B', H3:'C', H4:'d' },
            { H1:'E', H2:'B', H3:'F', H4:'G' },
            { H1:'C', H2:'H', H3:'L', H4:'M' },
            { H1:'I', H2:'B', H3:'E', H4:'A' }
        ];

        $scope.list = list;

        $scope.headers = ["Header1", "Header2", "Header3", "Header4"];

        $scope.sortColumn = 'Header1';

        $scope.reverseSort = false;

        $scope.sortData = function (columnIndex) {
            $scope.reverseSort = ($scope.sortColumn == $scope.headers[columnIndex]) ? !$scope.reverseSort : false;

            $scope.sortColumn = $scope.headers[columnIndex];
        }

    });

次に、このようにhtml側のコードを変更します

    <th ng-repeat= "header in headers">
            <a ng-click="sortData($index)"> {{headers[$index]}} </a>
    </th>
    <tr ng-repeat "result in results | orderBy : sortColumn : reverseSort">
        <td> {{results.h1}} </td>
        <td> {{results.h2}} </td>
        <td> {{results.h3}} </td>
        <td> {{results.h4}} </td>
    </tr>
于 2016-12-26T12:52:40.613 に答える
0

私はAngularで足を濡らしていますが、この素晴らしいチュートリアルを見つけました. これは、Scott Allen と上記のチュートリアルの功績を認めてまとめ
た実用的なplunkです。検索をクリックして、ソート可能なテーブルを表示します。

各列ヘッダーについて、クリック可能にする必要があります-リンクの ng-click が機能します。これにより、列の sortName がソートに設定されます。

<th>
     <a href="#" ng-click="sortName='name'; sortReverse = !sortReverse">
          <span ng-show="sortName == 'name' && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
          <span ng-show="sortName == 'name' && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
           Name
     </a>
</th>

次に、テーブル本体で、その sortName を orderBy フィルター orderBy:sortName:sortReverse にパイプできます。

<tr ng-repeat="repo in repos | orderBy:sortName:sortReverse | filter:searchRepos">
     <td>{{repo.name}}</td>
     <td class="tag tag-primary">{{repo.stargazers_count | number}}</td>
     <td>{{repo.language}}</td>
</tr>
于 2016-10-07T22:39:49.557 に答える
0

サードパーティの JavaScript ライブラリを使用します。それはあなたにそれ以上のものを与えるでしょう。良い例は datatables です (jQuery も使用している場合): https://datatables.net

または、ヘッダーがクリックされたときに $scope.results でバインドされた配列を注文するだけです。

于 2013-10-01T18:16:31.557 に答える