TOGOUTECH

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

coder 2025-01-11 原文

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

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

        };

从事件 Controller 提交事件和插入事件看起来像

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

所以插入效果很好,模态效果很好,但即使我试图返回 promise 或回调,网格也不会更新,这无济于事,

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

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

如果有人能帮我找出我的错误,我将不胜感激。

最佳答案

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

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

关于javascript - 添加行后如何强制自动刷新ui-grid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37599044/

有关javascript - 添加行后如何强制自动刷新ui-grid的更多相关文章

  1. javascript - 无法在 Express 中呈现 swig 模板 - 2

    所以我正在尝试使用consolidate.js渲染swigtemplates使用express,但是当我尝试从另一个模板“扩展”一个模板时出现以下错误:Error:ENOENT,nosuchfileordirectory'//one.html在我的app.js文件中,我将swig设置为我的渲染引擎(仅包括相关代码):varconsolidate=require('consolidate');app.set('viewengine','html');app.set('views',__dirname+'/views');app.engine('.html',consolidate.swi

  2. Javascript:构造函数中的回调 - 2

    我正在尝试为一个对象编写OOjavascript,该对象具有昂贵的初始化过程,完成后会回调一个函数。问题在于调用者需要在回调例程中使用同一对象的函数,而该对象尚不存在://ctorforfooobjectfunctionfoo(callback){//doslowinitializationhere..//callbackwhendonecallback();};foo.prototype=function(){return{//doStuffmethoddoStuff:function(){alert('stuffdone');}};}();//instantiatethefooob

  3. javascript - 如何将以毫秒为单位的日期转换为 iso 格式的 javascript? - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIoutputanISO-8601formattedstringinJavascript?如果我有一个以毫秒为单位表示日期的整数,将其转换为iso格式的语法是什么?

  4. python、jmeter、postman接口测试分别如何做断言 - 2

    目录一、python做接口测试的断言 1,python内置断言方式,assert函数2,unittest框架独有的断言方式二、jmeter做接口测试的断言三、postman做接口测试的断言1,postman上的快捷断言(点击即帮编写) 2,各种断言方式3,查看断言结果简介:断言是机器判定case是否通过的标准,检验预期结果与实际结果是否统一的标准。 目的:在接口测试,GUI自动化测试,接口自动化测试时自动校验结果,不用眼睛去查看,适合做大批量重复的判断时使用。近则单个接口测试的校验,远则自动化生产报告的必备条件。可以说没有断言case是不完整的case一、python做接口测试的断言 1,py

  5. javascript - 在 javascript/DOM 中存储文本内容的最快和/或最干净的方法是什么? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。我通常会看到版本1,但我从事的一些开源项目使用版本2,而我过去也使用过版本3。有没有人有更优雅的解决方案,也许是更具可扩展性的解决方案?版本1:vartext1='thisismyscript\'scontent';版本2:Thisismycontentvartext1=$('#text1').html();版本3:vartext1=$('#text1'

  6. javascript - 优化javascript代码以使用整数运算 - 2

    有一些算法可以“非常好”地解决问题,前提是“非常好”意味着最小化浮点算术运算的数量以支持整数算术。以Bresenham'slinealgorithm为例为了弄清楚要填充哪些像素以便在Canvas上画一条线:这个人几乎只用了一些简单的整数运算就使整个过程变得可行。这种事情在很多情况下显然是好的。但是,在javascript中需要大量float学运算的操作值得担心吗?我知道就语言规范而言,一切都几乎是十进制数。我想知道是否实际上尝试让事情尽可能接近整数是否值得——浏览器是否进行了优化以使其值得? 最佳答案 您可以在javascript中

  7. javascript - 使用 YoutubeAPI 播放 youtube 视频直到特定时间并暂停 - 2

    有没有办法使用YoutubeAPI播放视频直到视频中的某个点然后暂停? 最佳答案 我修改了YouTubePlayerAPIReferenceforiframeEmbeds中的代码在一定秒数后暂停播放。Demo代码通过等待onPlayerStateChange事件来工作。当事件触发时,它会检查事件以查看它是否是PLAYING事件。如果是,它会计算从当前时间(getCurrentTime()方法)到所需暂停点(硬编码为stopPlayAt变量)的剩余时间。它设置一个Javascript计时器来等待该差异,然后向API传递一个命令以暂停视

  8. javascript - Chosen.js - 是否可以限制所选项目的数量? - 2

    我有一个客户想要为用户提供从列表中最多选择5个附加选项的选项。我喜欢Chosen.js的概念,但如何限制选择?我想一种解决方案是使用onChange来计算所选的数字,然后禁用剩余的数字,但是有没有更简洁的解决方案? 最佳答案 Chosen提供了一个max_selected_options来允许你这样做:$(".chzn-select").chosen({max_selected_options:5}); 关于javascript-Chosen.js-是否可以限制所选项目的数量?,我们在S

  9. javascript - 定义 Javascript 对象时出现 IE8 错误? - 2

    我知道IE8很麻烦,但我从未见过它给我带来如此麻烦。我想要做的就是定义一个Javascript对象,它会导致错误,停止在页面上运行所有脚本。错误是“预期的标识符、字符串或数字”,表明问题发生在我在下面定义属性“类”的地方。我见过无数的脚本都是这样定义对象的,那么为什么IE8会吐槽这个呢?我将违规代码隔离到此。将它单独放在HTML页面的头部并在IE8中运行它会导致我看到的问题。varatts={class:"trigger"}; 最佳答案 通过用引号引起来定义使用适当的数据类型,"class"

  10. javascript - 两个相互依赖的字段的 knockout validation - 2

    考虑以下代码-varMyObjectModel=function(myObject){varself=this;self.myNumber1=ko.observable(myObject.number1).trimmed();self.myNumber2=ko.observable(myObject.number2).trimmed();我想扩展myNumber1和myNumber2,以添加knockoutvalidation,以便在两者均为空时抛出错误,并在其中一个有值时保持正常。知道如何实现这一目标吗? 最佳答案 您可以使用ko

随机推荐