选择 UI 网格 1 行时选择 UI 网格 2 行(反之亦然)

Question

我有两个具有相同数据的网格。我的目标是当在一个网格中选择一行时，另一个网格中的相应行也会被选中。普伦克：http://plnkr.co/edit/BBfMxvsv0OUsjiqblBJQ?p=preview

我像这样选择网格：

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

提前致谢

Answer 1

将第一个网格的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

通过调用 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);
      });
    }
  };