Angular ui-grid Verwenden Sie die selectedrow-Funktion, um den Inhalt einer Zeilenspalte zu steuern

Question

Ich möchte die ui-grid-Zeilenauswahlfunktion verwenden, um den Wert einer Spalte in der angeklickten Zeile festzulegen.

Ich habe eine Spalte in der DB mit dem Namen omit. Ich möchte, dass dieser Wert dem Status der ausgewählten Zeile entspricht, also wenn die Zeile ausgewählt ist, dann omit = 1, wenn Zeile nicht ausgewählt ist, dann omit = 0. Ich denke, ich habe diesen Teil herausgefunden (aber ich bin immer offen zu besseren Ideen!).

gridApi.selection.on.rowSelectionChanged($scope,function(row){ 
     if(row.isSelected){ 
      row.entity.omit = 1; 
     } 
     if(!row.isSelected){ 
      row.entity.omit = 0; 
     } 
     // now save to database... 
    }); 

    gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){ 
     angular.forEach(rows, function(value, key) { 
      if(value.isSelected){ 
      value.entity.omit = 1; 
      } 
      if(!value.isSelected){ 
      value.entity.omit = 0; 
      } 
     // now save to database... 
     }); 
    }); 

Was ich nicht herausfinden konnte, ist, wie die Zeile auswählen, wenn das Raster zuerst geladen wird

Wie also wähle ich bei der anfänglichen Belastung des Gitters die Zeile, wenn der Wert omit 1 ist?

Answer 1

Sie können die gridApi.selection.selectRow Methode verwenden, aber Sie müssen warten, bis das Grid die Daten verdaut hat, damit es funktioniert. Sie müssen es also entweder auf $interval (oder nach $timeout) setzen, um weiterzumachen, während das Gitter die Daten verdaut, oder Sie können gridApi.grid.modifyRows($scope.gridOptions.data) anrufen, bevor Sie selectRow anrufen ... um ehrlich zu sein, ich bin nicht sicher, warum Sie haben das nennen.

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection']); 
 

 
app.controller('gridCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) { 
 
    $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false }; 
 

 
    $scope.gridOptions.columnDefs = [ 
 
    { name: 'omit' }, 
 
    { name: 'id' }, 
 
    { name: 'name'}, 
 
    { name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false }, 
 
    { name: 'address.city' } 
 
    ]; 
 

 
    $scope.gridOptions.multiSelect = false; 
 
    $scope.gridOptions.modifierKeysToMultiSelect = false; 
 
    $scope.gridOptions.noUnselect = true; 
 
    $scope.gridOptions.onRegisterApi = function(gridApi) { 
 
    $scope.gridApi = gridApi; 
 

 
    gridApi.selection.on.rowSelectionChanged($scope,function(row){ 
 
     if(row.isSelected){ 
 
      row.entity.omit = 1; 
 
     } 
 
     if(!row.isSelected){ 
 
      row.entity.omit = 0; 
 
     } 
 
     // now save to database... 
 
    }); 
 

 
    gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){ 
 
     angular.forEach(rows, function(value, key) { 
 
     if(value.isSelected){ 
 
      value.entity.omit = 1; 
 
     } 
 
     if(!value.isSelected){ 
 
      value.entity.omit = 0; 
 
     } 
 
     // now save to database... 
 
     }); 
 
    }); 
 
    }; 
 

 
    $scope.toggleRowSelection = function() { 
 
    $scope.gridApi.selection.clearSelectedRows(); 
 
    $scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection; 
 
    $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS); 
 
    }; 
 

 
    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
 
    .success(function(data) { 
 
     _.forEach(data, function(row) { 
 
     row.omit = 0; 
 
     }); 
 
     
 
     /* arbitrarily setting the fourth row's omit value to 1*/ 
 
     data[3].omit = 1; 
 
     $scope.gridOptions.data = data; 
 
     
 
     /* using lodash find method to grab the row with omit === 1 */ 
 
     /* could also use native JS filter, which returns array rather than object */ 
 
     var initSelected = _.find($scope.gridOptions.data, function(row) { return row.omit === 1; }); 
 
     $scope.gridApi.grid.modifyRows($scope.gridOptions.data); 
 
     $scope.gridApi.selection.selectRow(initSelected); 
 

 
     /** 
 
     * OR: 
 
     * $interval(function() { 
 
     * $scope.gridApi.selection.selectRow(initSelected); 
 
     * }, 0, 1); 
 
     */ 
 
    }); 
 

 
    
 

 
}]);

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <script data-require="lodash.js@4.6.1" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
 
    <script src="http://ui-grid.info/release/ui-grid.js"></script> 
 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" /> 
 
    <link rel="stylesheet" href="main.css" type="text/css" /> 
 
    </head> 
 

 
    <body> 
 
    <div ng-controller="gridCtrl"> 
 
     <div ui-grid="gridOptions" ui-grid-selection="" class="grid"></div> 
 
    </div> 
 
    </body> 
 

 
</html>