각도 ui-grid는 rowrow 열의 내용을 제어하기 위해 selectedrow 기능을 사용합니다.

클릭 한 행의 열 값을 설정하는 ui-grid 행 선택 기능을 원합니다.각도 ui-grid는 rowrow 열의 내용을 제어하기 위해 selectedrow 기능을 사용합니다.

DB에 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이면 행을 어떻게 선택합니까?

출처

2016-07-14 Sports Racer

gridApi.selection.selectRow 메서드를 사용할 수 있지만 그리드가 데이터를 처리 할 때까지 기다려야합니다. 따라서 $interval (또는 $timeout 이후)에 그리드가 데이터를 소화하는 동안 계속 실행해야하거나 selectRow을 호출하기 전에 gridApi.grid.modifyRows($scope.gridOptions.data)으로 전화해야합니다. 이유는 확실하지 않습니다. 전화 해.

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="[email protected]" 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>

출처

2016-07-17 15:36:09

각도 ui-grid는 rowrow 열의 내용을 제어하기 위해 selectedrow 기능을 사용합니다.

답변

관련 문제