Question

我有两个相同数据的网格。我的目标是当在一个网格中选择一行时，另一个网格中的相应行也被选中。 Plunker：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);
      });
    }
  };

选择ui grid 1行时选择ui grid 2行（反之亦然）

1 个答案: