javascript - component - ui-grid columndefs

evento ui-grid angular: fila seleccionada

Question

Estoy intentando habilitar / deshabilitar un botón basado en la selección de una fila en un ui-grid. Si no hay filas seleccionadas, el botón está deshabilitado.

Encontré este plunkr con la antigua forma ng-grid de disparar un evento después de seleccionar una fila.

  $scope.gridOptions = { 

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

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

Desafortunadamente, no funciona, y no he encontrado ninguna señal de tal evento en la documentation ui-grid.

¿Cómo puedo lograr eso con ui-grid?

Answer 1

En ui-grid, registra una función de devolución de llamada en el evento "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); 
 })

Creo que deberías echar un vistazo a la página de tutoriales en ui-grid: http://ui-grid.info/docs/#/tutorial/210_selection . La página API apesta, en mi opinión :(.

Answer 2

Primero puede obtener todos los registros seleccionados en la grid actualmente haciendo:

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

Ahora podemos obtener la longitud de esta matriz usando:

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

basado en $scope.countRows>0 o 0 puede habilitar o deshabilitar un botón usando

ng-disabled = "countRows"

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

En el lado HTML puedes usar algo como esto

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