Question

我有一个网格，根据某些条件，我必须更改来自后端的数据。第一次从后面加载数据网格工作正常。当我开始切换数据时，网格会很好地显示新数据，但会暂停一段时间。我注意到这个时间是随机的，通常是3秒左右。

我尝试通过不同的方式将数据分配给网格，但结果是相同的：

1）

$scope.gridOptions = {
      //some options,
      data: $scope.myData
}

然后

Demande.query({lb: condition}, function (result) { $timeout(function () {$scope.myData = result;},0);// I also try without $timeout }

2）我尝试将数据直接分配给网格

Demande.query({lb: condition}, function (result) {
    $timeout(function () {$scope.gridOptions.data = result;},0);
}

3）我将上述方法与

结合起来

a）$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW)

b）$scope.gridApi.core.refreshRows()

但问题仍然存在。我正在使用angular-ui-grid 4.0.1

任何想法都将受到赞赏。

Answer 1

另一种选择：

4）$scope.gridOptions.data = angular.copy($scope.myData);

应该让网格需要一点时间呼吸！

<强>更新

angular.module('app', ['ui.grid'])
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.gridOptions = {
      columnDefs: []
    }
    for (var i = 0; i < 80; i++) {
      $scope.gridOptions.columnDefs.push({
        name: 'C' + (i + 1),
        enableColumnMenu: false
      });
    }
    var dataLoadCounter = 1;
    $scope.switchData = function() {
      $scope.gridOptions.data = [];
      for (var i = 0; i < 1000; i++) {
        $scope.gridOptions.data.push({});
        for (var j = 0; j < 80; j++) {
          $scope.gridOptions.data[i]['C' + (j + 1)] = 'D' + dataLoadCounter + (j + 1);
        }
      }
      dataLoadCounter++;
    }
    $scope.switchData();
  }]);

div[ui-grid] {
  width: 4500px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <button ng-click="switchData()">Switch Data</button>
  <div ui-grid="gridOptions">
  </div>
</div>

在ui-grid上交换数据需要花费大量时间

1 个答案: