AG-GRID & AngularJS - 如何在外部编辑数据答案

【问题标题】：AG-GRID & AngularJS - How to edit data externallyAG-GRID & AngularJS - 如何在外部编辑数据
【发布时间】：2018-11-03 04:11:09
【问题描述】：

我正在使用 Agularjs、UI-Router 和 AG-GRID 开发单页应用程序。我不知道如何从外部表单更新 AG-GRID 的数据。

让我解释一下，从 AG-GRID 数据表中，我添加了可以抓取行数据并将其传输到我的表单页面的按钮。然后表单页面将正确地填充数据。一旦进入表单页面，如果我尝试编辑数据并返回我的主页（我有 AG-GRID），我看不到任何更改。

我尝试执行 $scope.gridOptions.api.refreshCells();这似乎没有任何作用，也不会产生任何错误。

这是我目前的设置：

主控制器：

App.controller('Main_Controller', function ($scope, $http, $filter, $timeout, $mdDialog, $q, $resource, $interval, $mdSidenav, $state, Service) {

    var Buttons = function(params) {
        return '<md-button class="md-icon-button" aria-label="Edit" ng-click="Edit(data)"> <md-icon class="material-icons">mode_edit</md-icon> </md-button>'';
    }

    var columnDefs = [
    { cellRenderer: Buttons, width: 165 },
    { headerName: "Data1", field: "Data1"},
    { headerName: "Data2", field: "Data2"}, 
    ];

    $scope.gridOptions_incident = {
        columnDefs: columnDefs,
        domLayout: 'autoHeight',
        enableFilter: true,
        enableColResize: true,
        enableSorting: true,
        pagination: true,
        paginationPageSize:25,
        animateRows: true,
        headerHeight: headerHeight,
        rowHeight:rowHeight,
        angularCompileRows : true,  
        enableCellChangeFlash: true,
        debug: true,
        rowData: Service.get_data()
    };  

    $scope.Edit = function(data){
        Service.current_incident(data);
        $state.go('OPEN_ExternalForm');
    };  

});

服务：

GDI_App.factory('Service', function($http, $q, $timeout, $mdDialog, $resource, $window) {
    return{

        get_data: function(){
            var example_data = [
               { "Data1": "123123", "Data2": "15437"  },
               { "Data1": "432234", "Data2": "146"  },
               { "Data1": "45654", "Data2": "3534"  },
               { "Data1": "76587", "Data2": "78978"  },
               { "Data1": "2342", "Data2": "5345878"  },
               { "Data1": "178", "Data2": "34534"  },
               { "Data1": "173838", "Data2": "354534"  },
            ];
            return example_data             
        }
        current_incident: function(data){
          Current.Data = data;
          return Current.Data
        }

    }
});

表单控制器：

GDI_App.controller('Form_Controller', function ($scope, $http, $filter, $timeout, $mdDialog, $q, $resource, $interval, $mdSidenav, Service) {

    $scope.Current.Data = Service.current_incident();
    $scope.Submit = function(){

        $http({
            method: 'POST',
            url: REST_URL,
            processData: false,
            contentType: "application/json;odata=verbose",                 
            headers: HEADER_DATA,
            data: $scope.Current.Data
        });   

    }

});

表单 HTML：

I have a very basic HTML form:

<div ng-controller="Form_Controller">
    Data1: <input ng-model="Current.Data.Data1">
    Data2: <input ng-model="Current.Data.Data2">
    <button ng-click="Submit()" type="button">Submit</button>
</div>

我不太确定我错过了什么。我的最终目标是能够编辑来自外部数据的数据，然后将其同步到 AG-Grid。

有人有想法吗？

【问题讨论】：

为了保持客户端与后端同步，你不会编辑行（在你的表单中），将更改提交到后端，然后重定向到 ag-grid 页面，这将重新获取整个行集合？我问这个是因为我想重新获取最新数据也会更新您的网格。
我有一个大表格，大约有 20-25 个输入，这些输入与我的表格同步。以行格式编辑它是没有意义的。我创建了一个漂亮整洁的表单来组织所有内容，然后我希望它与表格同步。
我完全理解这一点，并不是建议不要使用表格。我想知道的是服务器在此交互中的哪些点得到更新，以及网格每次显示时都应重新加载最新数据的事实......我认为除了提供可靠的逻辑之外，这还可以解决您的问题
啊，读得太快了。这个想法将首先将更改汇总到后端，然后在提交时本地更新或同步行（在 ag-grid 上）。它是本地更新/同步部分，我似乎无法理解如何让它工作。我宁愿避免从后端重新加载整个数据以刷新一行。
更新了代码以更接近我的情况。

标签： javascript angularjs ag-grid

【解决方案1】：

你可以像这样更新单元格数据：

  var rowNode = $scope.gridOptions_incident.api.getRowNode(id);
  rowNode.setDataValue('Data2', 'newData');

【讨论】：