Angular ui-grid使用selectedrow特性控制一行列的内容

Question

我想要 ui-grid row select 功能来设置点击行中的列的值。

我在数据库中有一列名为 omit。我希望该值等于 selected 行的状态，因此如果该行是 selected 那么 omit = 1，如果行不是 selected 那么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...
        });
  });

我一直无法弄清楚的是 select 第一次加载网格时的行。

那么，在初始加载网格时，如果 omit 的值为 1，我如何 select 行？

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>

Angular ui-grid使用selectedrow特性控制一行列的内容

Angular ui-grid use selectedrow feature to control content of a row column

angularjs

angular-ui-grid

ui-grid