Angular UI-Grid事件：行选择

Question

我正在尝试根据ui-grid上行的选择来启用/禁用按钮。如果没有选择任何行，则禁用该按钮。

我发现了这个plunkr，其中使用旧的ng-grid方法在选择行后触发事件。

  $scope.gridOptions = { 

  data: 'myData', 
  selectedItems: $scope.selections,
  enableRowSelection: true,

  afterSelectionChange:function() {
        if ($scope.selections != "" ) {
            $scope.disabled = false;
        } else {
            $scope.disabled = true;
        }
  }
};

很遗憾它不起作用，而我在ui-grid的文档中没有发现任何关于这样事件的迹象。

我该如何在ui-grid中实现这个功能呢？

- Pablo

Answer 1

在ui-grid中，您需要在事件"rowSelectionChanged"上注册一个回调函数。

 $scope.gridOptions.onRegisterApi = function (gridApi) {
                $scope.gridApi = gridApi;
                gridApi.selection.on.rowSelectionChanged($scope, callbackFunction);
                gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction);
            }
 }

 function callbackFunction(row) { 
    var msg = 'row selected ' + row.isSelected; $log.log(msg); 
 })

我认为你应该看一下ui-grid的教程页面：http://ui-grid.info/docs/#/tutorial/210_selection。在我看来，API页面很糟糕 :(。

- Huy Hoang Pham

---

我应该向回调函数传递哪些参数？ - satish kumar V

gridApi.selection.on.rowSelectionChanged($scope,function(row){ var msg = '行 ' + row.entity.id + ' 已' + (row.isSelected ? '选中' : '取消选中'); $log.log(msg); }); （注：翻译的结果尽可能保持了原始 JavaScript 代码的结构和格式） - Huy Hoang Pham

API页面真的很糟糕，但这是URL：http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi#events - Yasin Okumuş

Answer 2

您可以通过以下方式先获取当前在grid中选择的所有记录：

$scope.rowsSelected = $scope.gridApi.selection.getSelectedRows();

现在我们可以使用以下方式获取此数组的长度：

$scope.countRows = $scope.rowsSelected.length;

根据$scope.countRows>0或0，您可以使用以下方法启用或禁用按钮：

ng-disabled = "countRows"

- Peter

---

感谢 @shivisuper，很高兴它有用！ - Peter

Answer 3

   $scope.countRows=0;

    $scope.gridOptions.onRegisterApi = function(gridApi){

       $scope.gridApi = gridApi;

       gridApi.selection.on.rowSelectionChanged($scope, function(row){ 
        $scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
        });

       gridApi.selection.on.rowSelectionChangedBatch($scope, function(row){ 
        $scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
        });
    }; 

在HTML中，您可以使用类似以下的内容：

    <button class="custom-button" ng-disabled="countRows<=0" ng-click="submit()">Details</button>

- Nikhil Kumar K