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>