1

ドキュメントに従ってスマートグリッドをセットアップしましたが、すべて正常に動作しています。モーダル ダイアログで新しいレコードを追加しています。新しいレコードの追加が成功したら、スマート グリッドを更新したいと思います。属性を使用しているため、コレクションを更新するだけでよいことをドキュメントから理解していますst-safe-src。

私の問題は、17 のレコードを表示していて、現在 2 ページ目にいるとします。モーダルを開いて新しいレコードを追加し、正常に追加した後に閉じて、コレクションをリセットしています。しかし、このシナリオでは、ページはページ 2 にのみ残り、ページ 1 にリセットされません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table st-table="displayedCollection" st-pipe="getMasterJobs" st-safe-src="rowCollection" class="table table-condensed table-striped table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th></th>
    </tr>
  </thead>
  <tbody ng-show="!isDataLoading">
    <tr ng-repeat="row in displayedCollection">
      <td>{{row.name}}</td>
      <td>{{row.description}}</td>
      <td>
        <button type="button" ng-click="editRow(row)" class="btn btn-xs btn-info">
          <i class="fa fa-edit"></i> Edit
        </button>
      </td>
    </tr>
  </tbody>
  <tbody ng-show="isDataLoading">
    <tr>
      <td colspan="3" class="text-center">Loading...</div>
      </td>
    </tr>
  </tbody>
  <tfoot ng-hide="isDataLoading">
    <tr>
      <td class="text-center" st-pagination="" st-items-by-page="10" st-displayed-pages="displayedPages" colspan="4"></td>
    </tr>
  </tfoot>
</table>

私は controller.js ファイルにこれを持っています:

$scope.rowCollection = [];
$scope.isDataLoading = false;
//copy the references (you could clone ie angular.copy but then have to go through a dirty checking for the matches)
$scope.displayedCollection = [].concat($scope.rowCollection);

$scope.getMasterJobs = function(tableState) {
  console.log(tableState);
  var start = 0;
  var length = 10;
  var pagination = tableState.pagination;
  start = pagination.start || 0; // This is NOT the page number, but the index of item in the list that you want to use to display the table.
  length = pagination.number || 10; // Number of entries showed per page.
  $scope.isDataLoading = true;
  AdminJobMasterService.getMasterJobs(start, length).success(function(response, status, headers, config) {
    $scope.rowCollection = response.data;
    $scope.displayedCollection = [].concat($scope.rowCollection);

    //set the number of pages so the pagination can update
    tableState.pagination.numberOfPages = response.numberOfPages;
    $scope.displayedPages = Math.ceil(response.numberOfPages / length);
    $scope.isDataLoading = false;
  }).error(function(data, status, headers, config) {
    console.error(data);
    $scope.isDataLoading = false;
  });
};

ここで、新規/編集ボタンをクリックすると別のコントローラーを呼び出し、モーダルを閉じるをクリックすると、イベントがトリガーされ、上記のコントローラーでそのイベントが処理されます。smart-table によって監視されたコレクションをリセットし、tableState 変数を初期化しようとしていることを確認してください。tableState 変数がないと、そのまま呼び出すことはできgetMasterJobs()ませtableState.paginationんnull。

$scope.$on('new-job-added', function(event, data) {
  $log.info("Time to refresh!");
  $scope.rowCollection = [];
  $scope.displayedCollection = [].concat($scope.rowCollection);
  var tableState = {
    sort: {},
    search: {},
    pagination: {
      start: 0
    }
  };
  $scope.getMasterJobs(tableState);
});

4

0 に答える 0