角度ui-grid事件:选择行

时间:2015-03-25 03:41:53

标签: javascript angularjs angular-ui-grid

我正在尝试根据在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 documentation中没有发现此类事件的迹象。

如何使用ui-grid实现这一目标?

3 个答案:

答案 0 :(得分:42)

在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页面很糟糕:(。

答案 1 :(得分:3)

您首先可以通过以下方式获取grid中所选的所有记录:

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

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

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

基于$scope.countRows>00,您可以使用

启用或停用按钮
ng-disabled = "countRows"

答案 2 :(得分:2)

   $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>