Select ui grid 2 row when ui grid 1 row is selected（反之亦然）

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 事件第一个网格，因此，当用户 select 一行被触发时。我将 selected 行存储在 $scope.selectedRow

第二个网格是 select 通过调用 API 编辑的：selectRow。请注意，您必须传递行实体才能获得正确的 selection:

$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);
      });
    }
  };

Select ui grid 2 row when ui grid 1 row is selected（反之亦然）

Select ui grid 2 row when ui grid 1 row is selected(vice versa)

angularjs

angular-ui-grid

ui-grid