Question

我花了很长时间来解决这个问题并需要一些帮助。我在帮助Angular Ui-Grid的同时在我的页面上渲染网格，但是在我添加了新行之后无法强制它刷新数据。在我的主控制器中，我有功能＆＃39;创建活动＆＃39;这是为上传数据的模态调用服务和模板：

.menu li a {
   padding 2px;
}

提交事件并从事件控制器插入事件，如

  $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)
            }

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

Answer 1

在你的＆＃34;然后＆＃34;中试试这个功能：

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

Answer 2

您可以尝试从httpPost返回承诺或回调，而不是通常返回缓存事件。试试这是否有效。

Answer 3

您可以使用grid.api.core.notifyDataChange( uiGridConstants.dataChange.ALL );

Answer 4

您可以先使用$scope.grid.options.data.push(data);然后再使用scope.grid.refresh();，但是问题是，如果您将数据导出为PDF或CSV，则不会反映新添加的数据。

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

4 个答案: