0

同じデータを持つ 2 つのグリッドがあります。私の目的は、あるグリッドで行が選択されたときに、別のグリッドの対応する行も選択されるようにすることです。プランカー: http://plnkr.co/edit/BBfMxvsv0OUsjiqblBJQ?p=preview

私はこのように選択されたグリッドを取得しています:

 onRegisterApi: function(gridApi) {
    console.log('Loaded Grid API 1');
    $scope.gridApi1 = gridApi;
    $scope.mySelectedRows1 = gridApi.selection.getSelectedRows();
    }

前もって感謝します

4

1 に答える 1

0

onRegisterApi最初のグリッドを次のように更新します。

 onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 1');
      $scope.gridApi1 = gridApi;
      $scope.mySelectedRows1 = gridApi.selection.getSelectedRows();

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.selectedRow = row.entity;
        $scope.gridApi2.selection.selectRow($scope.selectedRow);
      });
    }

私は rowSelectionChangedイベントを最初のグリッドにバインドしているので、ユーザーが行を選択すると起動します..選択した行を$scope.selectedRow

2 番目のグリッドは、API を呼び出すことによって選択されますselectRow。適切な選択を取得するには、行エンティティを渡す必要があることに注意してください。

$scope.gridApi2.selection.selectRow($scope.selectedRow); <-- selectedRow is row entity

最後に、次のようなものが得られます。

$scope.gridOptions1 = {
    saveFocus: false,
    saveScroll: true,
    enableFiltering: true,
    enableGridMenu: true,
    onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 1');
      $scope.gridApi1 = gridApi;

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.gridApi2.selection.selectRow(row.entity);
      });
    }
  };


  $scope.gridOptions2 = {
    saveFocus: false,
    saveScroll: true,
    enableFiltering: true,
    enableGridMenu: true,
    onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 2');
      $scope.gridApi2 = gridApi;

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.gridApi1.selection.selectRow(row.entity);
      });
    }
  };
于 2016-06-09T06:26:47.320 に答える