0

我想使用 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...
        });
  });

我无法弄清楚的是第一次加载网格时如何选择行。

那么，在网格的初始加载时，如果值为omit1，我如何选择行？

4

1 回答 1

1

您可以使用该gridApi.selection.selectRow方法，但您必须等到网格消化了数据才能工作。因此，您要么必须将其设置在 a $interval（或在 a 之后$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>

于 2016-07-17T15:36:09.417 回答