Угловая ui-grid использование selectedrow для управления содержимым столбца строки

Question

Я хотел бы, чтобы функция выбора строки ui-grid устанавливала значение столбца в строке с щелчком.

У меня есть столбец в БД под названием omit. Я бы хотел, чтобы это значение равнялось состоянию выбранной строки, поэтому, если строка выбрана, то omit = 1, если строка не выбрана, то omit = 0. Я думаю, что эта часть была выяснена (однако я всегда открыт к лучшим идеям!).

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

Что мне не удалось выяснить, так это то, как выбрать строку при первой загрузке сетки.

Итак, на начальной загрузке сетки, как выбрать строку, если значение omit равно 1?

Answer 1

Вы можете использовать метод gridApi.selection.selectRow, но вам нужно подождать, пока сетка не переварит данные для его работы. Поэтому вам нужно либо установить его на $interval (или после $timeout), чтобы продолжать работать, пока сетка переваривает данные, или вы можете позвонить gridApi.grid.modifyRows($scope.gridOptions.data), прежде чем позвонить по телефону selectRow ... если честно, я не уверен, почему у вас есть называть это.

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>