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

【问题标题】：how to force automatically refresh ui-grid after adding row添加行后如何强制自动刷新ui-grid
【发布时间】：2019-10-24 15:15:44
【问题描述】：

我花了很长时间解决这个问题，需要一些帮助。我在 Angular Ui-Grid 的帮助下在我的页面上渲染网格，但在我添加新行后无法强制它刷新数据。在我的主控制器中，我有函数“创建事件”，它正在调用用于上传数据的模式的服务和模板：

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

如果有人可以帮助我找出我的错误，我将不胜感激。

【问题讨论】：

第一次打开网格时，在哪里绑定原始数据到网格？我没有看到那个代码。
@RaniRadcliff 请检查更新后的帖子
插入后，result.data 是只包含插入的行还是整个数据集？
@RaniRadcliff 是的。 $log.info 显示插入的行

标签： javascript angularjs angular-ui-grid

【解决方案1】：

在你的“then”函数中试试这个：

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

【讨论】：

$scope.gridOptions.data.push(result.data);不能在内部使用然后导致工厂内部的 insertEvent
我知道更新网格的唯一方法是将其重新绑定到数据模型。不知何故，您需要将新信息推送到您当前的数据模型中，并将其设置为您的 gridOptions.data。
问题是我用基于api的刷新drig做了rootScope函数并调用了刷新，然后在编辑事件控制器中我用这个函数设置了超时1500。这绝对是丑陋的方法，因为我正在使用 rootScope 但它现在可以工作
我一直这样做，但我使用的是服务，而不是工厂，只是在我的成功函数中绑定新数据。
你能给我一个简单的例子吗？

【解决方案2】：

您能否尝试从您的 httpPost 返回一个承诺或回调，而不是通常返回缓存的事件。试试这是否可行。

【讨论】：

我做了return result.data;，但 gris 仍然没有更新
好的，当您从函数返回时，调用者函数期望返回的数据没有任何延迟。但是由于您是从 httpPost 返回的，因此预计会出现延迟，并且您的调用者在该实例中什么也得不到，并假定它是未定义的。因此，我想可以解决您的问题的方法不是返回 result.data，而是尝试在回调中发送它或使用 Promise 解决它。
考虑到我写过的角度文档var insertEvent = function (event) { return $http({ method : 'POST', url : apiUrl, data : event }) .then(function success (response ) { return response.data; }, function error (responce){ console.log(" post has been fault ") }) }; Post 工作正常，但网格不行

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：