添加行后如何强制自动刷新ui-grid

Question

我花了很长时间来解决这个问题并需要一些帮助.我正在帮助Angular Ui-Grid在我的页面上渲染网格,但在添加新行后不能强制它刷新数据.在我的主控制器中,我有函数'create event',它正在为上传数据的模态调用服务和模板:

  $scope.createEvent = function (eventTypeId) {

            var newEvent = null;
            var eventFields = null;
            var opts = {
                backdrop: 'static',
                backdropClick: true,
                dialogFade: false,
                keyboard: true,
                templateUrl: 'views/event.html',
                controller: 'EventEditCtrl',
                size: 'md',
                resolve: {
                    params: function () {
                        return {model: newEvent, fields: eventFields, caption: "Create event"};
                    }
                }
            };

            eventService.getEventTemplate(0, eventTypeId)
                .then(function (data) {
                    newEvent = data.model;
                    newEvent.id = null;
                    newEvent.occuredDate = new Date(newEvent.occuredDate);
                    eventFields = data.fields;
                    var uibModalInstance = $uibModal.open(opts);

                    uibModalInstance.result.then(function (data) {
                            $location.path("views/" + data.model.id);
                        }, function () {
                        }
                    );
                }, errorDetails)

        };

提交事件并从事件控制器插入事件看起来像

 $scope.insertEvent = function (event) {
        $log.info('insert');
        $log.info(event);

        eventService.insertEvent(event)
            .then(function (data) {
                $uibModalInstance.close(data);
            });
    };

$scope.onSubmit = function (event) {
    console.log(event);
  if (event.id == null || event.id == 0) {
      $scope.insertEvent(event)
  }
}

最后我的插入事件服务功能看起来像

    var insertEvent = function (event) {
        return $http({
            method  : 'POST',
            url     : apiUrl,
            data    : event
        })
            .then(function success (result ) {
                console.log(result.data);
                cachedEvents = result.data;
                return result.data

            }, function error (response){
                $log.error(" post has been failed ", response)
            })
    };

因此插入工作很好,模态工作很好但是网格不会更新,即使我试图返回承诺或回调,它也无济于事,

我已经尝试在关闭模态,插入事件或单击提交按钮后设置刷新,但没有任何帮助

   $scope.gridApi.core.queueGridRefresh();
          $scope.gridApi.core.refresh();
          $scope.gridApi.grid.refreshCanvas();
          $scope.gridApi.grid.refreshRows();

如果网格已被更改,我也尝试设置通知,但它也没有帮助:

    onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;

                gridApi.core.on.columnVisibilityChanged($scope, function (changedColumn) {
                    $scope.columnChanged = {name: changedColumn.colDef.name, visible: changedColumn.colDef.visible};
                });

                //**********

                gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                    $scope.rowData = row.entity;
                    $scope.id = $scope.rowData.id;
                    $scope.rowKeys = Object.keys($scope.rowData);
                });

                gridApi.core.notifyDataChange( uiGridConstants.dataChange.ALL)
            }

原始网格数据初始化

 var getData = (function () {

                $http.get(urlData)
                    .success(function (data) {
                        // Considering Angular UI-Grid $scope.gridOptions.data should be declared as is
                        $scope.gridOptions.data = data;
                        // $interval whilst we wait for the grid to digest the data we just gave it
                        $interval(function () {
                            $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
                        }, 0, 1);
                    });
            }());

如果有人能帮助我找到我的错误,我感激不尽.

Answer 1

在你的“then”函数中尝试一下：

$scope.gridOptions.data.push(result.data);