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

时间:2018-05-24 04:03:01

标签: javascript angularjs ag-grid

我正在使用Agularjs,UI-Router和AG-GRID处理单页面应用程序。我无法弄清楚如何从外部表单更新AG-GRID的数据。

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

我尝试过$ scope.gridOptions.api.refreshCells();这个doesent似乎做了什么,也没有产生任何错误。

这是我的设置到目前为止的样子:

Main_controller:

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上同步。

有人有想法吗?

1 个答案:

答案 0 :(得分:0)

u可以这样更新单元格数据:

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